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，这种方法适用于子元素为单行文本的状况。

 

 

　　　　 注：转自百度经验。