前言

設計網頁的時候，除了CSS水平居中的需求外，還會經常遇到CSS垂直居中的需求，CSS垂直居中跟CSS水平居中一樣都是前端設計師的基本功。 這篇教程將我以往用過的8種CSS實現垂直居中的方法總結出來，也方便日後再用到時回顧。

工具/原料

CSS3

方法/步驟

1.通過verticle-align:middle實現CSS垂直居中。 通過vertical-align:middle實現CSS垂直居中是最常使用的方法，但是有一點需要格外注意，vertical生效的前提是元素的display：inline-block。

2.通過display:flex實現CSS垂直居中。 隨著越來越多瀏覽器相容CSS中的flexbox特性，所以現在通過“display:flex”實現CSS水平居中的方案也越來越受青睞。 通過display:flex實現CSS垂直居中的方法是給父元素display:flex;而子元素align-self:center; 這個跟CSS水平居中的原理是一樣的，只是在flex-direction上有所差別，一個是row(預設值)，另外一個是column。

3.通過偽元素:before實現CSS垂直居中。 具體方式是為父元素新增偽元素:before，使得子元素實現垂直居中。

4.通過display:table-cell實現CSS垂直居中。 給父元素display:table，子元素display：table-cell的方式實現CSS垂直居中。

5.通過隱藏節點實現CSS垂直居中。 建立一個隱藏節點#hide，使得隱藏節點的height值為剩餘高度的一半即可。 這種方法也適用於CSS水平居中，原理一樣。

6.已知父元素高度通過transform實現CSS垂直居中。 給子元素的position:relative，再通過translateY即可定位到垂直居中的位置。

7.未知父元素高度通過transform實現CSS垂直居中。 先給父元素position:relative，再給子元素position:absolute，通過translateY即可定位到垂直居中的位置。

8.通過line-height實現CSS垂直居中。 設定子元素的line-height值等於父元素的height，這種方法適用於子元素為單行文字的情況。

注意事項

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

做為一名前端程式設計師，有一個學習的氛圍跟一個交流圈子特別重要。這是我的一個前端學習交流群 330336289（邀請碼：寂靜），想學習交流前端，打算深入瞭解這個行業的朋友，不管你是小白還是大牛都歡迎加入，大家一起交流學習。