我之所以整理這類專題的手冊，就是css相關(guān)的內(nèi)容實(shí)在太碎和零散，同時(shí)又夾雜著相關(guān)的兼容問題。遇到問題時(shí)，我們有時(shí)候過度依賴搜索引擎進(jìn)行求證解決，解決完也沒做認(rèn)真的歸納和總結(jié)。再次遇到此類問題時(shí)，我們有可能還不會(huì)，這就是我歸納這個(gè)手冊的目的，我會(huì)把日常工作中經(jīng)常會(huì)用到的高頻CSS相關(guān)方法歸納到這個(gè)手冊里（有的內(nèi)容可能來源其它作者），歡迎你持續(xù)的訂閱和關(guān)注。
今天我們一起來梳理下CSS垂直居中的幾種方法，我們在布局一個(gè)頁面時(shí)，通常都會(huì)用到水平置中和垂直置中，處理水平居中很好處理，不外乎就是設(shè)定margin:0 auto;或是text-align:center;,就可以輕松解決掉水平居中的問題，但一直以來最麻煩對(duì)齊問題就是「垂直居中」，以下將介紹七種單純利用CSS垂直置中的方式，其實(shí)一點(diǎn)也不難(當(dāng)然跟水平居中比起來難了一點(diǎn))，只需要理解背后的原理就可以輕松應(yīng)用。
1、設(shè)定行高( line-height )
設(shè)定行高是垂直居中最簡單的方式，適用于「單行」的「行內(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)槿绻嘈校诙信c第一行的間距會(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;
}
2、添加偽元素( ::before、::after )
剛剛第一種方法，雖然是最簡單的方法(適用于單行標(biāo)題)，不過就是只能單行，所以我們?nèi)绻尪嘈械脑匾部梢源怪本又校晚氁褂脗卧氐姆绞健Ｔ诖酥埃冉忉屢幌翪SS里頭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)到「偽元素」身上，利用::before和::after添加div進(jìn)到框框內(nèi)，讓這個(gè)「偽」div的高度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;
}
3、calc 動(dòng)態(tài)計(jì)算
看到這邊或許會(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);
}
4、 使用表格或假裝表格
或許有些人會(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;
}
5、transform
transform是CSS3的新屬性，主要用于元素的變形、旋轉(zhuǎn)和位移，利用transform里頭的translateY (改變垂直的位移，如果使用百分比為單位，則是以元素本身的長寬為基準(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;
}
6、絕對(duì)定位
絕對(duì)定位就是CSS里頭的position:absolute，利用絕對(duì)位置來指定，但垂直置中的做法又和我們正統(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;
}
7、使用Flexbox
Flexbox可謂是我們在移動(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)送大家一張圖：
本文內(nèi)容參考來源
https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html
由于源文是繁體，筆者在內(nèi)容上做了一些調(diào)整。
小節(jié)
以上就是筆者整理的一些垂直居中的方法，由于垂直居中往往會(huì)動(dòng)用到修改display這個(gè)屬性，往往會(huì)在排版上造成一些影響，例如不該用flexbox 的地方如果用了flexbox，不該用table 的地方用了table，不該用inline-block 的地方用了inline-block，后續(xù)反而要多寫許多其他的定位樣式來進(jìn)行修正，那就有點(diǎn)本末倒置了，因此如何活用這些CSS 垂直居中的方法，就要依據(jù)大家的版面結(jié)構(gòu)進(jìn)行靈活運(yùn)用啰！^_^ 如果你有其他本文沒有提及到的垂直居中方法，歡迎到留言區(qū)進(jìn)行分析喲。
