前言
設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，除了CSS水平居中的需求外定铜，還會(huì)經(jīng)常遇到CSS垂直居中的需求阳液，CSS垂直居中跟CSS水平居中一樣都是前端設(shè)計(jì)師的基本功。
這篇教程將我以往用過(guò)的8種CSS實(shí)現(xiàn)垂直居中的方法總結(jié)出來(lái)揣炕，也方便日后再用到時(shí)回顧帘皿。
工具/原料
CSS3
方法/步驟
1.通過(guò)verticle-align:middle實(shí)現(xiàn)CSS垂直居中。
通過(guò)vertical-align:middle實(shí)現(xiàn)CSS垂直居中是最常使用的方法畸陡，但是有一點(diǎn)需要格外注意鹰溜，vertical生效的前提是元素的display：inline-block。
2.通過(guò)display:flex實(shí)現(xiàn)CSS垂直居中丁恭。
隨著越來(lái)越多瀏覽器兼容CSS中的flexbox特性曹动，所以現(xiàn)在通過(guò)“display:flex”實(shí)現(xiàn)CSS水平居中的方案也越來(lái)越受青睞。
通過(guò)display:flex實(shí)現(xiàn)CSS垂直居中的方法是給父元素display:flex;而子元素align-self:center;
這個(gè)跟CSS水平居中的原理是一樣的牲览，只是在flex-direction上有所差別墓陈，一個(gè)是row(默認(rèn)值)，另外一個(gè)是column第献。
3.通過(guò)偽元素:before實(shí)現(xiàn)CSS垂直居中贡必。
具體方式是為父元素添加偽元素:before，使得子元素實(shí)現(xiàn)垂直居中庸毫。
4.通過(guò)display:table-cell實(shí)現(xiàn)CSS垂直居中仔拟。
給父元素display:table，子元素display：table-cell的方式實(shí)現(xiàn)CSS垂直居中飒赃。
學(xué)習(xí)交流前端方面的技術(shù)利花，打算深入了解這個(gè)行業(yè)的朋友，可以加下小編的前端學(xué)習(xí)裙330336289载佳，邀請(qǐng)碼（寂靜）
每天都有分享前端知識(shí)和學(xué)習(xí)方法晋被，歡迎小伙伴加入交流
5.通過(guò)隱藏節(jié)點(diǎn)實(shí)現(xiàn)CSS垂直居中。
創(chuàng)建一個(gè)隱藏節(jié)點(diǎn)#hide刚盈，使得隱藏節(jié)點(diǎn)的height值為剩余高度的一半即可羡洛。
這種方法也適用于CSS水平居中，原理一樣。
6.已知父元素高度通過(guò)transform實(shí)現(xiàn)CSS垂直居中欲侮。
給子元素的position:relative崭闲，再通過(guò)translateY即可定位到垂直居中的位置。
7.未知父元素高度通過(guò)transform實(shí)現(xiàn)CSS垂直居中威蕉。
先給父元素position:relative刁俭，再給子元素position:absolute，通過(guò)translateY即可定位到垂直居中的位置韧涨。
??
8.通過(guò)line-height實(shí)現(xiàn)CSS垂直居中牍戚。
設(shè)置子元素的line-height值等于父元素的height，這種方法適用于子元素為單行文本的情況虑粥。
??
注意事項(xiàng)
前三種方法是瀏覽器兼容性最友好的如孝，尤其是第1、3種娩贷，其它的或多或少會(huì)有些瀏覽器兼容性問(wèn)題
