這是一道面試必考題，很多面試官都喜歡問這個(gè)問題

史上最全 - CSS完成程度垂直居中方式

要完成上圖的效果看似很簡單，實(shí)則隱藏玄機(jī)，下面總結(jié)了一下CSS完成程度垂直居中的方式大約有下面這些，come

僅居中元素定寬高適用

absolute + 負(fù)margin

absolute + margin auto

absolute + calc

居中元素不定寬高

absolute + transform

lineheight

writing-mode

table

css-table

flex

grid

absolute + 負(fù)margin

為了完成上面的效果先來做些準(zhǔn)備工作，假定HTML代碼如下，總共兩個(gè)元素，父元素和子元素

123123

wp是父元素的類名，box是子元素的類名，由于有定寬和不定寬的區(qū)別，size用來表示指定寬度，下面是一切效果都要用到的公共代碼，主要是設(shè)置顏色和寬高

留意：后面不在反復(fù)這段公共代碼，只會給出相應(yīng)提示

/* 公共代碼 */

.wp {

 border: 1px solid red;

 width: 300px;

 height: 300px;

}

.box {

 background: green;

}

.box.size{

 width: 100px;

 height: 100px;

}

/* 公共代碼 */

絕對定位的百分比是相關(guān)于父元素的寬高，經(jīng)過這個(gè)特性能夠讓子元素的居中顯現(xiàn)，但絕對定位是基于子元素的左上角，希冀的效果是子元素的中心居中顯現(xiàn)

為了修正這個(gè)問題，能夠借助外邊距的負(fù)值，負(fù)的外邊距能夠讓元素向相反方向定位，經(jīng)過指定子元素的外邊距為子元素寬度一半的負(fù)值，就能夠讓子元素居中了，css代碼如下

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 position: relative;

}

.box {

 position: absolute;;

 top: 50%;

 left: 50%;

 margin-left: -50px;

 margin-top: -50px;

}

這是我比擬常用的方式，這種方式比擬好了解，兼容性也很好，缺陷是需求曉得子元素的寬高

absolute + margin auto

這種方式也請求居中元素的寬高必需固定，HTML代碼如下

123123

這種方式經(jīng)過設(shè)置各個(gè)方向的間隔都是0，此時(shí)再講margin設(shè)為auto，就能夠在各個(gè)方向上居中了

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 position: relative;

}

.box {

 position: absolute;;

 top: 0;

 left: 0;

 right: 0;

 bottom: 0;

 margin: auto;

}

這種辦法兼容性也很好，缺陷是需求曉得子元素的寬高

absolute + calc

這種方式也請求居中元素的寬高必需固定，所以我們?yōu)閎ox增加size類，HTML代碼如下

123123

感激css3帶來了計(jì)算屬性，既然top的百分比是基于元素的左上角，那么在減去寬度的一半就好了，代碼如下

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 position: relative;

}

.box {

 position: absolute;;

 top: calc(50% - 50px);

 left: calc(50% - 50px);

}

這種辦法兼容性依賴calc的兼容性，缺陷是需求曉得子元素的寬高

absolute + transform

還是絕對定位，但這個(gè)辦法不需求子元素固定寬高，所以不再需求size類了，HTML代碼如下

123123

修復(fù)絕對定位的問題，還能夠運(yùn)用css3新增的transform，transform的translate屬性也能夠設(shè)置百分比，其是相關(guān)于本身的寬和高，所以能夠講translate設(shè)置為-50%，就能夠做到居中了，代碼如下

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 position: relative;

}

.box {

 position: absolute;

 top: 50%;

 left: 50%;

 transform: translate(-50%, -50%);

}

這種辦法兼容性依賴translate2d的兼容性

lineheight

應(yīng)用行內(nèi)元素居中屬性也能夠做到程度垂直居中，HTML代碼如下

123123

把box設(shè)置為行內(nèi)元素，經(jīng)過text-align就能夠做到程度居中，但很多同窗可能不曉得經(jīng)過經(jīng)過vertical-align也能夠在垂直方向做到居中，代碼如下

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 line-height: 300px;

 text-align: center;

 font-size: 0px;

}

.box {

 font-size: 16px;

 display: inline-block;

 vertical-align: middle;

 line-height: initial;

 text-align: left; /* 修正文字 */

}

這種辦法需求在子元素中將文字顯現(xiàn)重置為想要的效果

writing-mode

很多同窗一定和我一樣不曉得writing-mode屬性，感激@張鑫旭教師的反應(yīng)，簡單來說writing-mode能夠改動文字的顯現(xiàn)方向，比方能夠經(jīng)過writing-mode讓文字的顯現(xiàn)變?yōu)榇怪狈较?/p>

程度方向

垂直方向

.div2 {

 writing-mode: vertical-lr;

}

顯現(xiàn)效果如下：

程度方向

垂

直

方

向

更神奇的是一切程度方向上的css屬性，都會變?yōu)榇怪狈较蛏系膶傩裕确絫ext-align，經(jīng)過writing-mode和text-align就能夠做到程度和垂直方向的居中了，只不過要略微費(fèi)事一點(diǎn)

123123

/* 此處援用上面的公共代碼 */

/* 此處援用上面的公共代碼 */

/* 定位代碼 */

.wp {

 writing-mode: vertical-lr;

 text-align: center;

}

.wp-inner {

 writing-mode: horizontal-tb;

 display: inline-block;

 text-align: center;

 width: 100%;

}

.box {

 display: inline-block;

 margin: auto;

 text-align: left;

}

這種辦法完成起來和了解起來都略微有些復(fù)雜

table

曾經(jīng)table被用來做頁面規(guī)劃，如今沒人這么做了，但table也可以完成程度垂直居中，但是會增加很多冗余代碼

123123

tabel單元格中的內(nèi)容自然就是垂直居中的，只需添加一個(gè)程度居中屬性就好了

.wp{

 text-align:center;

}

.box{

 display:inline-block;

}

這種辦法就是代碼太冗余，而且也不是table的正確用法

css-table

css新增的table屬性，能夠讓我們把普通元素，變?yōu)閠able元素的理想效果，經(jīng)過這個(gè)特性也能夠完成程度垂直居中

123123

下面經(jīng)過css屬性，能夠讓div顯現(xiàn)的和table一樣

.wp{

 display:table-cell;

 text-align:center;

 vertical-align:middle;

}

.box{

 display:inline-block;

}

這種辦法和table一樣的原理，但卻沒有那么多冗余代碼，兼容性也還不錯(cuò)

flex

flex作為現(xiàn)代的規(guī)劃計(jì)劃，推翻了過去的經(jīng)歷，只需幾行代碼就能夠文雅的做到程度垂直居中

123123

.wp{

 display:flex;

 justify-content:center;

 align-items:center;

}

目前在挪動端曾經(jīng)完整能夠運(yùn)用flex了，PC端需求看本人業(yè)務(wù)的兼容性狀況

grid

css新出的網(wǎng)格規(guī)劃，由于兼容性不太好，不斷沒太關(guān)注，經(jīng)過grid也能夠完成程度垂直居中

123123

.wp{

 display:grid;

}

.box{

 align-self:center;

 justify-self:center;

}

代碼量也很少，但兼容性不如flex，不引薦運(yùn)用

總結(jié)

下面比照下各個(gè)方式的優(yōu)缺陷，肯定又雙叒叕該有同窗說回字的寫法了，簡單總結(jié)下

PC端有兼容性請求，寬高固定，引薦absolute + 負(fù)margin

PC端有兼容請求，寬高不固定，引薦css-table

PC端無兼容性請求，引薦flex

挪動端引薦運(yùn)用flex

史上最全 - CSS完成程度垂直居中方式

最近發(fā)現(xiàn)很多同窗都對css不夠注重，這其實(shí)是不正確的，比方下面的這么簡單的問題都有那么多同窗不會，我也是很無語

123

123

.red{

 color:red

}

.blue{

 color:blue

}

問兩個(gè)div的顏色分別是什么，居然只要40%的同窗可以答對，這40%中還有很多同窗不曉得為什么，希望這些同窗好好補(bǔ)習(xí)下CSS根底