CSS垂直居中的8種方法

CSS垂直居中的8種方法

一、經過verticle-align:middle實現CSS垂直居中。

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

 

二、經過display:flex實現CSS垂直居中。

隨着愈來愈多瀏覽器兼容CSS中的flexbox特性，因此如今經過「display:flex」實現CSS水平居中的方案也愈來愈受青睞。

經過display:flex實現CSS垂直居中的方法是給父元素display:flex;而子元素align-self:center;

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

三、經過僞元素:before實現CSS垂直居中。

具體方式是爲父元素添加僞元素:before，使得子元素實現垂直居中。

 

四、經過display:table-cell實現CSS垂直居中。

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

 

五、經過隱藏節點實現CSS垂直居中。

建立一個隱藏節點#hide，使得隱藏節點的height值爲剩餘高度的一半便可。

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

 

六、已知父元素高度經過transform實現CSS垂直居中。

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

 

七、到垂直居中的位置。

 

八、經過line-height實現CSS垂直居中。

設置子元素的line-height值等於父元素的height，這種方法適用於子元素爲單行文本的狀況。

 

 

　　　　 注：轉自百度經驗。