前言

設(shè)計(jì)網(wǎng)頁的時候，除了CSS水平居中的需求外，還會經(jīng)常遇到CSS垂直居中的需求，CSS垂直居中跟CSS水平居中一樣都是前端設(shè)計(jì)師的基本功。

這篇教程將我以往用過的8種CSS實(shí)現(xiàn)垂直居中的方法總結(jié)出來，也方便日后再用到時回顧。

工具/原料

CSS3

1.通過verticle-align:middle實(shí)現(xiàn)CSS垂直居中。

通過vertical-align:middle實(shí)現(xiàn)CSS垂直居中是最常使用的方法，但是有一點(diǎn)需要格外注意，vertical生效的前提是元素的display：inline-block。

2.通過display:flex實(shí)現(xiàn)CSS垂直居中。

隨著越來越多瀏覽器兼容CSS中的flexbox特性，所以現(xiàn)在通過“display:flex”實(shí)現(xiàn)CSS水平居中的方案也越來越受青睞。

通過display:flex實(shí)現(xiàn)CSS垂直居中的方法是給父元素display:flex;而子元素align-self:center;

這個跟CSS水平居中的原理是一樣的，只是在flex-direction上有所差別，一個是row(默認(rèn)值)，另外一個是column。

3.通過偽元素:before實(shí)現(xiàn)CSS垂直居中。

具體方式是為父元素添加偽元素:before，使得子元素實(shí)現(xiàn)垂直居中。

4.通過display:table-cell實(shí)現(xiàn)CSS垂直居中。

給父元素display:table，子元素display：table-cell的方式實(shí)現(xiàn)CSS垂直居中。

學(xué)習(xí)交流前端方面的技術(shù)，打算深入了解這個行業(yè)的朋友，可以加下小編的前端學(xué)習(xí)裙330336289，邀請碼（寂靜）

每天都有分享前端知識和學(xué)習(xí)方法，歡迎小伙伴加入交流

5.通過隱藏節(jié)點(diǎn)實(shí)現(xiàn)CSS垂直居中。

創(chuàng)建一個隱藏節(jié)點(diǎn)#hide，使得隱藏節(jié)點(diǎn)的height值為剩余高度的一半即可。

這種方法也適用于CSS水平居中，原理一樣。

6.已知父元素高度通過transform實(shí)現(xiàn)CSS垂直居中。

給子元素的position:relative，再通過translateY即可定位到垂直居中的位置。

7.未知父元素高度通過transform實(shí)現(xiàn)CSS垂直居中。

先給父元素position:relative，再給子元素position:absolute，通過translateY即可定位到垂直居中的位置。

8.通過line-height實(shí)現(xiàn)CSS垂直居中。

設(shè)置子元素的line-height值等于父元素的height，這種方法適用于子元素為單行文本的情況。

前三種方法是瀏覽器兼容性最友好的，尤其是第1、3種，其它的或多或少會有些瀏覽器兼容性問題