面試常見問題——垂直居中的幾種方法

Prasanta 發(fā)布于2019-08-28 18:05 / 1725人閱讀

摘要：前幾天面試，被問到兩次，沒答好，找到這篇文章收藏學(xué)習(xí)一下，來自這里做手機(jī)的頁面，經(jīng)常會(huì)遇到需要垂直居中的情況，這里把常用的垂直居中的幾種方法整理下。

（前幾天面試，被問到兩次，沒答好，找到這篇文章收藏學(xué)習(xí)一下，來自這里）

做手機(jī)的頁面，經(jīng)常會(huì)遇到需要垂直居中的情況，這里把常用的垂直居中的幾種方法整理下。

結(jié)構(gòu)

我是垂直居中元素

方法1：dispaly:table-cell

.box1{
  text-align:center; 
  display:table-cell;
  vertical-align:middle;
}

方法2：display:flex

.box2{
  display:flex;
  justify-content:center;
  align-items:center; 
  text-align:center;
}

方法3：translate(-50%,-50%)

.box3{ position:relative;}
.box3 span{
  position:absolute; 
  left:50%; 
  top:50%; 
  -webkit-transform:translate(-50%,-50%); 
  width:100%; 
  text-align:center;
}

方法4：display:inline-block

.box4{
  text-align:center; 
  font-size:0;
}
.box4 span{
  vertical-align:middle; 
  display:inline-block; 
  font-size:16px;
}
.box4:after{
  content:"";
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

方法5：margin:auto

.box5{ 
  display:flex; 
  text-align:center;
}
.box5 span{
  margin:auto;
}

方法6：display:-webkit-box

.box6{
  display:-webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center; 
  text-align:center;
}

效果

整理這些實(shí)際是想嘗試下不同的布局。

2，5，6實(shí)際都是flexbox的方法，flexbox兼容比較麻煩，布局可以參考ionic柵格。

3需要定位，4需要有參照物，最簡單的還是table的方法。

寫了一個(gè)table-布局的demo，實(shí)現(xiàn)方法比較簡單，兼容性也比較好。

網(wǎng)上也已經(jīng)有table的柵格系統(tǒng)，retchat很多組件也用了table布局。

GPU云服務(wù)器云服務(wù)器 js緩存的幾種方法最基本的幾種 html的幾種輪播 js的幾種數(shù)據(jù)類型

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/111003.html

相關(guān)文章

使一個(gè)div垂直+水平居中的幾種方法

摘要：前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個(gè)應(yīng)該算是比較簡單的問題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個(gè)問題思路絕對(duì)定位居中原始版這個(gè)是我回答出來的，也是被各位所熟知的一種方法，設(shè)外層相對(duì)定位，內(nèi) 前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個(gè)應(yīng)該算是比較簡單的問題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...

joyqi 2019-08-29 11:04 評(píng)論0 收藏0
(面試題)垂直居中的幾種實(shí)現(xiàn)方式

摘要：尤其是在實(shí)際頁面中，有很多特殊的場景，導(dǎo)致水平居中實(shí)現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例一個(gè)的在一個(gè)水平垂直居中，用實(shí)現(xiàn)。首先定義元素層和垂直居中無關(guān)的樣式直接定義在里。相比較水平居中，垂直居中比較復(fù)雜點(diǎn)。尤其是在實(shí)際頁面中，有很多特殊的場景，導(dǎo)致水平居中實(shí)現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例：一個(gè)200*2...

cheukyin 2019-08-30 11:18 評(píng)論0 收藏0
純CSS實(shí)現(xiàn)垂直居中的幾種方法

摘要：垂直居中是布局中十分常見的效果之一，為實(shí)現(xiàn)良好的兼容性，端實(shí)現(xiàn)垂直居中的方法一般是通過絕對(duì)定位，，負(fù)邊距等方法。有了，針對(duì)移動(dòng)端的垂直居中就更加多樣化。方法這實(shí)際上是方法的變形，移位是通過來實(shí)現(xiàn)的。垂直居中是布局中十分常見的效果之一，為實(shí)現(xiàn)良好的兼容性，PC端實(shí)現(xiàn)垂直居中的方法一般是通過絕對(duì)定位，table-cell，負(fù)邊距等方法。有了css3，針對(duì)移動(dòng)端的垂直居中就更加多樣化。方...

FullStackDeveloper 2019-08-30 15:43 評(píng)論0 收藏0
純CSS實(shí)現(xiàn)垂直居中的幾種方法

摘要：垂直居中是布局中十分常見的效果之一，為實(shí)現(xiàn)良好的兼容性，端實(shí)現(xiàn)垂直居中的方法一般是通過絕對(duì)定位，，負(fù)邊距等方法。有了，針對(duì)移動(dòng)端的垂直居中就更加多樣化。方法這實(shí)際上是方法的變形，移位是通過來實(shí)現(xiàn)的。垂直居中是布局中十分常見的效果之一，為實(shí)現(xiàn)良好的兼容性，PC端實(shí)現(xiàn)垂直居中的方法一般是通過絕對(duì)定位，table-cell，負(fù)邊距等方法。有了css3，針對(duì)移動(dòng)端的垂直居中就更加多樣化。方...

sourcenode 2019-08-23 16:41 評(píng)論0 收藏0
基本方法筆記 - 收藏集 - 掘金

摘要：探討判斷橫豎屏的最佳實(shí)現(xiàn)前端掘金在移動(dòng)端，判斷橫豎屏的場景并不少見，比如根據(jù)橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗(yàn)。探討判斷橫豎屏的最佳實(shí)現(xiàn) - 前端 - 掘金在移動(dòng)端，判斷橫豎屏的場景并不少見，比如根據(jù)橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗(yàn)。判斷橫豎屏的實(shí)現(xiàn)方法多種多樣，本文就此來探討下目前有哪些實(shí)現(xiàn)方法以及其中的優(yōu)...

maochunguang 2019-08-20 17:44 評(píng)論0 收藏0