整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS 是前端里面的基礎(chǔ)之一，也是非常重要的一部分，它往往決定了你所做出來(lái)的網(wǎng)頁(yè)頁(yè)面是否美觀。在設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面的過程中，總會(huì)有將元素或者文字進(jìn)行水平垂直居中的要求。下面w3cschool編程獅就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。
當(dāng)元素有給定的高度以及寬度的時(shí)候，使用 margin: auto; 元素僅會(huì)水平居中，并不會(huì)進(jìn)行垂直居中。此時(shí)就需要設(shè)置元素的 position 為 absolute，父級(jí)元素的 position 為 relative，同時(shí)元素的上下左右都需要設(shè)置為 0。
HTML 代碼
<div class="box">
<div class="center1"></div>
</div>CSS 代碼
.box{
width: 200px;
height: 200px;
background-color: #eee;
position: relative;
margin-top: 20px;
}
.center1{
width: 50px;
height: 50px;
background-color: #00ACED;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}效果展示：
當(dāng)已經(jīng)知道了要進(jìn)行水平垂直居中的元素的寬高時(shí)，就可以通過設(shè)置 position: absolute 來(lái)實(shí)現(xiàn)。但是，使用的同時(shí)還需要結(jié)合其他屬性才完整實(shí)現(xiàn)。因?yàn)?，單是設(shè)置 absolute，上左距離均為一半，就會(huì)出現(xiàn)下面這種情況。很顯然可以看到，元素并不是完全居中，僅只有左上角的位置在中心點(diǎn)
概念圖：
因此想要實(shí)現(xiàn)元素完全水平垂直居中，在設(shè)置了 absolute 定位后，可以設(shè)置 margin 值為負(fù)，或者使用 calc 來(lái)計(jì)算，上左距離在 50% 的基礎(chǔ)上還要減去元素本身一半的寬高。
margin 值為負(fù)或者 calc 計(jì)算均是在已知元素寬高的情況下，假設(shè)不知道元素的寬高，那么怎么實(shí)現(xiàn)水平垂直居中呢？這里就可以使用 transform 屬性，通過坐標(biāo)位移來(lái)實(shí)現(xiàn)居中。
CSS 代碼
/* 結(jié)合 margin */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
/* 結(jié)合 calc 計(jì)算*/
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: calc(50% - 25px)
top: calc(50% - 25px);
}
/* 結(jié)合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}效果展示
03
PART
可以通過彈性布局來(lái)設(shè)置水平垂直居中，這里需要設(shè)置父級(jí)元素 display:flex; 還需要設(shè)置兩個(gè)屬性，水平布局 justify-content 以及垂直布局 align-items。
HTML代碼
<div class="box2">
<div class="center4"></div>
</div>CSS代碼：
.box2{
background-color: #eee;
width: 200px;
height: 200px;
position: relative;
margin-top: 20px ;
display: flex;
justify-content: center;
align-items: center;
}
.center4{
width: 50px;
height: 50px;
background-color: #B39873;
}效果展示：
前面介紹的是元素如何實(shí)現(xiàn)水平垂直居中，下面介紹的是如何將文字進(jìn)行水平垂直居中。這第一個(gè)方法也是最經(jīng)常用的，使用文本水平對(duì)齊 text-align 和行高 line-height 來(lái)實(shí)現(xiàn)的。
HTML 代碼
<div class="box3">
<div class="center5">文字居中</div>
</div>CSS 代碼
.box3{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
}
.center5{
text-align: center;
line-height: 200px;
}效果展示
05
PART
第二個(gè)方法可以通過網(wǎng)格布局 grid 來(lái)實(shí)現(xiàn)。而這里通過 grid 有兩種方式實(shí)現(xiàn)，一種對(duì)元素本身屬性進(jìn)行設(shè)置，另一種在元素的父級(jí)元素中設(shè)置。兩者看上去內(nèi)容似乎差不多，不同的是在元素中設(shè)置的是 align-self 還要多了一個(gè) margin，父級(jí)元素中是 align-items。
相關(guān)代碼：
/* grid 元素中設(shè)置 */
.box4{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
}
.center6{
align-self: center;
justify-content: center;
margin: auto;
}
/* grid 父級(jí)元素中設(shè)置 */
.box5{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
align-items: center;
justify-content: center;
}
效果展示：
以上就是關(guān)于 CSS 如何將元素或者文字進(jìn)行水平垂直居中的幾種常用方法，大家還其他關(guān)于 CSS 實(shí)現(xiàn)水平垂直居中的方法嗎？請(qǐng)?jiān)谠u(píng)論區(qū)留下你的想法。
關(guān)注w3cschool編程獅訂閱更多IT資訊、技術(shù)干貨~
之所以整理這類專題的手冊(cè)，就是CSS相關(guān)的內(nèi)容實(shí)在太碎和零散，同時(shí)又夾雜著相關(guān)的兼容問題。遇到問題時(shí)，我們有時(shí)候過度依賴搜索引擎進(jìn)行求證解決，解決完也沒做認(rèn)真的歸納和總結(jié)。再次遇到此類問題時(shí)，我們有可能還不會(huì)，這就是我歸納這個(gè)手冊(cè)的目的，我會(huì)把日常工作中經(jīng)常會(huì)用到的高頻CSS相關(guān)方法歸納到這個(gè)手冊(cè)里（有的內(nèi)容可能來(lái)源其它作者），歡迎你持續(xù)的訂閱和關(guān)注。
今天我們一起來(lái)梳理下CSS垂直居中的幾種方法，我們?cè)诓季忠粋€(gè)頁(yè)面時(shí)，通常都會(huì)用到水平置中和垂直置中，處理水平居中很好處理，不外乎就是設(shè)定margin:0 auto;或是text-align:center;,就可以輕松解決掉水平居中的問題，但一直以來(lái)最麻煩對(duì)齊問題就是「垂直居中」，以下將介紹七種單純利用CSS垂直置中的方式，其實(shí)一點(diǎn)也不難(當(dāng)然跟水平居中比起來(lái)難了一點(diǎn))，只需要理解背后的原理就可以輕松應(yīng)用。
設(shè)定行高是垂直居中最簡(jiǎn)單的方式，適用于「單行」的「行內(nèi)元素」 ( inline、inline-block )，例如單行的標(biāo)題，或是已經(jīng)設(shè)為inline-block屬性的div，若將line-height設(shè)成和高度一樣的數(shù)值，則內(nèi)容的行內(nèi)元素就會(huì)被垂直置中，因?yàn)槭切懈撸詴?huì)在行內(nèi)元素的上下都加上行高的1/2，所以就垂直置中了！不過由此就可以看出，為什么必須要單行的行內(nèi)元素，因?yàn)槿绻嘈?，第二行與第一行的間距會(huì)變超大，就不是我們所期望的效果了。CSS范例：外層div0，內(nèi)容redbox，讓redbox水平垂直置中。
.div0{
width:200px;
height:150px;
border:1px solid #000;
line-height:150px;
text-align:center;
}
.redbox{
display:inline-block;
width:30px;
height:30px;
background:#c00;
}
剛剛第一種方法，雖然是最簡(jiǎn)單的方法(適用于單行標(biāo)題)，不過就是只能單行，所以我們?nèi)绻尪嘈械脑匾部梢源怪本又?，就須要使用偽元素的方式。在此之前，先解釋一下CSS里頭vertical-align這個(gè)屬性，這個(gè)屬性雖然是垂直置中，不過卻是指在元素內(nèi)的所有元素垂直位置互相置中，并不是相對(duì)于外框的高度垂直居中。(下面的CSS會(huì)造成這種樣子的垂直居中)
.div0{
width:200px;
height:150px;
border:1px solid #000;
text-align:center;
}
.redbox{
width:30px;
height:30px;
background:#c00;
display:inline-block;
vertical-align:middle;
}
.greenbox{
width:30px;
height:60px;
background:#0c0;
display:inline-block;
vertical-align:middle;
}
.bluebox{
width:30px;
height:40px;
background:#00f;
display:inline-block;
vertical-align:middle;
}
因此，如果有一個(gè)方塊變成了高度100%，那么其他的方塊就會(huì)真正的垂直居中。
.greenbox{
width:30px;
height:100%;
background:#0c0;
display:inline-block;
vertical-align:middle;
}
但是我們總不能每次要垂直居中，都要添加一個(gè)奇怪的div在里頭吧！所以我們就要把腦筋動(dòng)到「?jìng)卧亍股砩?，利?:before和::after添加div進(jìn)到框框內(nèi)，讓這個(gè)「?jìng)巍筪iv的高度100%,就可以輕松地讓其他的div都居中。不過不過不過！div記得要把display設(shè)為inline-block，畢竟 vertical-align:middle 是針對(duì)行內(nèi)元素，div本身是block，所以必須要做更改！
.div0::before{
content:'';
width:0;
height:100%;
display:inline-block;
position:relative;
vertical-align:middle;
background:#f00;
}
看到這邊或許會(huì)有疑問，如果今天我的div必須是block，我該怎么讓它垂直居中呢？這時(shí)候就必須用到CSS特有的calc動(dòng)態(tài)計(jì)算的能力，我們只要讓要居中的div的top屬性，與上方的距離是「50%的外框高度- 50%的div高度」，就可以做到垂直居中，至于為什么不用margin-top，因?yàn)閙argin抓到的是水平高度，必須要用top才會(huì)正確。
.div0{
width:200px;
height:150px;
border:1px solid #000;
}
.redbox{
position:relative；
width:30px;
height:30px;
background:#c00;
float:left;
top:calc(50% - 15px);
margin-left:calc(50% - 45px);
}
.greenbox{
position:relative；
width:30px;
height:80px;
background:#0c0;
float:left;
top:calc(50% - 40px);
}
.bluebox{
position:relative；
width:30px;
height:40px;
background:#00f;
float:left;
top:calc(50% - 20px);
}
或許有些人會(huì)發(fā)現(xiàn)，在表格這個(gè)HTML里，要實(shí)現(xiàn)垂直置中是相當(dāng)容易的，只需要下一行vertical-align:middle就可以，為什么呢？最主要的原因就在于table的display是table，而td的display是table-cell，所以我們除了直接使用表格之外，也可以將要垂直置中元素的父元素的display改為table-cell，就可以輕松實(shí)現(xiàn)，不過修改display有時(shí)候也會(huì)造成其他樣式屬性的連動(dòng)影響，需要小心使用。
HTML：
<table> <tr> <td> <div>表格垂直居中</div> </td> </tr> </table> <div class="like-table"> <div>假的表格垂直居中</div> </div>
CSS：
.like-table{
display:table-cell;
}
td,
.like-table{
width:150px;
height:100px;
border:1px solid #000;
vertical-align: middle;
}
td div,
.like-table div{
width:100px;
height:50px;
margin:0 auto;
color:#fff;
font-size:12px;
line-height: 50px;
text-align: center;
background:#c00;
}
.like-table div{
background:#069;
}
transform是CSS3的新屬性，主要用于元素的變形、旋轉(zhuǎn)和位移，利用transform里頭的translateY (改變垂直的位移，如果使用百分比為單位，則是以元素本身的長(zhǎng)寬為基準(zhǔn))，搭配元素本身的top屬性，就可以做出垂直居中的效果，需要注意的地方是，子元素必須要加上position:relative，不然就會(huì)沒有效果喔。
.use-transform{
width:200px;
height:200px;
border:1px solid #000;
}
.use-transform div{
position: relative;
width:100px;
height:50px;
top:50%;
transform:translateY(-50%);
background:#095;
}
絕對(duì)定位就是CSS里頭的position:absolute，利用絕對(duì)位置來(lái)指定，但垂直置中的做法又和我們正統(tǒng)的絕對(duì)位置不太相同，是要將上下左右的數(shù)值都設(shè)為0，再搭配一個(gè)margin:auto，就可以辦到垂直置中，不過要特別注意的是，設(shè)定絕對(duì)定位的子元素，其父元素的position必須要指定為relative喔！而且絕對(duì)定位的元素是會(huì)互相覆蓋的，所以如果內(nèi)容元素較多，可能就會(huì)有些問題。
.use-absolute{
position: relative;
width:200px;
height:150px;
border:1px solid #000;
}
.use-absolute div{
position: absolute;
width:100px;
height:50px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:#f60;
}
Flexbox可謂是我們?cè)谝苿?dòng)端用的最多的布局方法，因?yàn)榇蟛糠脂F(xiàn)代手機(jī)瀏覽器都支持這個(gè)方法了。Flexbox，使用align-items或align-content的屬性，輕輕松松就可以做到垂直居中的效果喔！
.use-flexbox{
display:flex;
align-items:center;
justify-content:center;
width:200px;
height:150px;
border:1px solid #000;
}
.use-flexbox div{
width:100px;
height:50px;
background:#099;
}
由于flexbox布局的屬性眾多，如何方便記憶，筆者贈(zèng)送大家一張圖：
上圖有可能你看不清楚，此圖高清無(wú)碼地址，歡迎下載使用：
https://www.qianduandaren.com/demo/images/flex.png
本文內(nèi)容參考來(lái)源
https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html
由于源文是繁體，筆者在內(nèi)容上做了一些調(diào)整。
以上就是筆者整理的一些垂直居中的方法，由于垂直居中往往會(huì)動(dòng)用到修改display這個(gè)屬性，往往會(huì)在排版上造成一些影響，例如不該用flexbox 的地方如果用了flexbox，不該用table 的地方用了table，不該用inline-block 的地方用了inline-block，后續(xù)反而要多寫許多其他的定位樣式來(lái)進(jìn)行修正，那就有點(diǎn)本末倒置了，因此如何活用這些CSS 垂直居中的方法，就要依據(jù)大家的版面結(jié)構(gòu)進(jìn)行靈活運(yùn)用啰！^_^ 如果你有其他本文沒有提及到的垂直居中方法，歡迎到留言區(qū)進(jìn)行分析喲。
更多精彩內(nèi)容，請(qǐng)關(guān)注“前端達(dá)人”公眾號(hào)
者｜顏海鏡
編輯｜覃云
出處丨前端之巔
本文已獲作者授權(quán)，轉(zhuǎn)載來(lái)源：
https://segmentfault.com/a/1190000016389031
劃重點(diǎn)，這是一道面試必考題，很多面試官都喜歡問這個(gè)問題，我就被問過好幾次了。
要實(shí)現(xiàn)上圖的效果看似很簡(jiǎn)單，實(shí)則暗藏玄機(jī)，本文總結(jié)了一下 CSS 實(shí)現(xiàn)水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個(gè) github 倉(cāng)庫(kù)在：https://github.com/yanhaijing/vertical-center
歡迎大家 star。
僅居中元素定寬高適用：
居中元素不定寬高：
為了實(shí)現(xiàn)上面的效果先來(lái)做些準(zhǔn)備工作，假設(shè) HTML 代碼如下，總共兩個(gè)元素，父元素和子元素：
<div class="wp"> <div class="box size">123123</div> </div>
wp 是父元素的類名，box 是子元素的類名，因?yàn)橛卸▽捄筒欢▽挼膮^(qū)別，size 用來(lái)表示指定寬度，下面是所有效果都要用到的公共代碼，主要是設(shè)置顏色和寬高。
注意：后面不在重復(fù)這段公共代碼，只會(huì)給出相應(yīng)提示。
/* 公共代碼 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
.box.size{
width: 100px;
height: 100px;
}
/* 公共代碼 */
絕對(duì)定位的百分比是相對(duì)于父元素的寬高，通過這個(gè)特性可以讓子元素的居中顯示，但絕對(duì)定位是基于子元素的左上角，期望的效果是子元素的中心居中顯示。
為了修正這個(gè)問題，可以借助外邊距的負(fù)值，負(fù)的外邊距可以讓元素向相反方向定位，通過指定子元素的外邊距為子元素寬度一半的負(fù)值，就可以讓子元素居中了，css 代碼如下。
/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
這是我比較常用的方式，這種方式比較好理解，兼容性也很好，缺點(diǎn)是需要知道子元素的寬高。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/absolute1.html
這種方式也要求居中元素的寬高必須固定，HTML 代碼如下：
<div class="wp"> <div class="box size">123123</div> </div>
這種方式通過設(shè)置各個(gè)方向的距離都是 0，此時(shí)再講 margin 設(shè)為 auto，就可以在各個(gè)方向上居中了。
/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
這種方法兼容性也很好，缺點(diǎn)是需要知道子元素的寬高。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/absolute2.html
這種方式也要求居中元素的寬高必須固定，所以我們?yōu)?box 增加 size 類，HTML 代碼如下：
<div class="wp"> <div class="box size">123123</div> </div>
感謝 css3 帶來(lái)了計(jì)算屬性，既然 top 的百分比是基于元素的左上角，那么在減去寬度的一半就好了，代碼如下
/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
這種方法兼容性依賴 calc 的兼容性，缺點(diǎn)是需要知道子元素的寬高。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/absolute3.html
還是絕對(duì)定位，但這個(gè)方法不需要子元素固定寬高，所以不再需要 size 類了，HTML 代碼如下：
<div class="wp"> <div class="box">123123</div> </div>
修復(fù)絕對(duì)定位的問題，還可以使用 css3 新增的 transform，transform 的 translate 屬性也可以設(shè)置百分比，其是相對(duì)于自身的寬和高，所以可以講 translate 設(shè)置為 -50%，就可以做到居中了，代碼如下：
/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
這種方法兼容性依賴 translate2d 的兼容性。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/absolute4.html
利用行內(nèi)元素居中屬性也可以做到水平垂直居中，HTML 代碼如下：
<div class="wp"> <div class="box">123123</div> </div>
把 box 設(shè)置為行內(nèi)元素，通過 text-align 就可以做到水平居中，但很多同學(xué)可能不知道通過通過 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; /* 修正文字 */
}
這種方法需要在子元素中將文字顯示重置為想要的效果。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/lineheight.html
很多同學(xué)一定和我一樣不知道 writing-mode 屬性，感謝 @張?chǎng)涡窭蠋煹姆答?，?jiǎn)單來(lái)說(shuō) writing-mode 可以改變文字的顯示方向，比如可以通過 writing-mode 讓文字的顯示變?yōu)榇怪狈较颉?/p>
<div class="div1">水平方向</div>
<div class="div2">垂直方向</div>
.div2 {
writing-mode: vertical-lr;
}
顯示效果如下：
水平方向 垂 直 方 向
更神奇的是所有水平方向上的 css 屬性，都會(huì)變?yōu)榇怪狈较蛏系膶傩?，比?text-align，通過 writing-mode 和 text-align 就可以做到水平和垂直方向的居中了，只不過要稍微麻煩一點(diǎn)：
<div class="wp">
<div class="wp-inner">
<div class="box">123123</div>
</div>
</div>
/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.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;
}
這種方法實(shí)現(xiàn)起來(lái)和理解起來(lái)都稍微有些復(fù)雜。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/writing-mode.html
曾經(jīng) table 被用來(lái)做頁(yè)面布局，現(xiàn)在沒人這么做了，但 table 也能夠?qū)崿F(xiàn)水平垂直居中，但是會(huì)增加很多冗余代碼：
<table> <tbody> <tr> <td class="wp"> <div class="box">123123</div> </td> </tr> </tbody> </table>
tabel 單元格中的內(nèi)容天然就是垂直居中的，只要添加一個(gè)水平居中屬性就好了。
.wp {
text-align: center;
}
.box {
display: inline-block;
}
這種方法就是代碼太冗余，而且也不是 table 的正確用法。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/table.html
css 新增的 table 屬性，可以讓我們把普通元素，變?yōu)?table 元素的現(xiàn)實(shí)效果，通過這個(gè)特性也可以實(shí)現(xiàn)水平垂直居中。
<div class="wp"> <div class="box">123123</div> </div>
下面通過 css 屬性，可以讓 div 顯示的和 table 一樣：
.wp {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
這種方法和 table 一樣的原理，但卻沒有那么多冗余代碼，兼容性也還不錯(cuò)。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/css-table.html
flex 作為現(xiàn)代的布局方案，顛覆了過去的經(jīng)驗(yàn)，只需幾行代碼就可以優(yōu)雅的做到水平垂直居中。
<div class="wp">
<div class="box">123123</div>
</div>
.wp {
display: flex;
justify-content: center;
align-items: center;
}
目前在移動(dòng)端已經(jīng)完全可以使用 flex 了，PC 端需要看自己業(yè)務(wù)的兼容性情況。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/flex.html
感謝 @一絲姐 反饋的這個(gè)方案，css 新出的網(wǎng)格布局，由于兼容性不太好，一直沒太關(guān)注，通過 grid 也可以實(shí)現(xiàn)水平垂直居中。
<div class="wp">
<div class="box">123123</div>
</div>
.wp {
display: grid;
}
.box {
align-self: center;
justify-self: center;
}
代碼量也很少，但兼容性不如 flex，不推薦使用。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/grid.html
下面對(duì)比下各個(gè)方式的優(yōu)缺點(diǎn)，肯定又雙叒叕該有同學(xué)說(shuō)回字的寫法了，簡(jiǎn)單總結(jié)下：
小貼士：關(guān)于 flex 的兼容性決方案，請(qǐng)看這里：
https://yanhaijing.com/css/2016/08/21/flex-practice-on-mobile/
最近發(fā)現(xiàn)很多同學(xué)都對(duì) css 不夠重視，這其實(shí)是不正確的，比如下面的這么簡(jiǎn)單的問題都有那么多同學(xué)不會(huì)，我也是很無(wú)語(yǔ)：
<div class="red blue">123</div>
<div class="blue red">123</div>
.red {
color: red
}
.blue {
color: blue
}
問兩個(gè) div 的顏色分別是什么，竟然只有 40% 的同學(xué)能夠答對(duì)，這 40% 中還有很多同學(xué)不知道為什么，希望這些同學(xué)好好補(bǔ)習(xí)下 CSS 基礎(chǔ)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
