CSS设置多行文本垂直居中

发布时间:2019-12-22编辑:脚本学堂
本文介绍下,在css中设置多行文本垂直居中的方法,使用width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性即可实现。

单行文本居中,将line-height设置成和height一样即可。

多行文本,则需使用width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性来实现。

多行文本垂直居中的CSS设置:
 

复制代码 代码示例:
/*多行居中对齐的方法,width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性,且div不能浮动*/
.vcenter
{
width: 100px; height: 102px; vertical-align: middle; display: table-cell; overflow: hidden;
}

如果这个div必须浮动,那么可以在里面再嵌套一个div。

此方法存在的问题:
width和height必须固定,否则无法实现居中。

父div再设置一个display: table的属性。

此方法存在的问题:
overflow属性不起作用了,这就是把div设置成table-cell的后果。
因此,如果要实现overflow:hidden,还需要在里面设置一个div,单独设置overflow:hidden的属性。