CSS设置垂直居中


设置垂直居中通常有两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本。

父元素高度确定的单行文本设置垂直居中

通过设置父元素的height 和 line-height 的值一致来实现。

HTML代码


    
今天星期四

CSS代码


父元素高度确定的多行文本设置垂直居中方法一

插入table(包括tbody,tr,td标签),同时设置vertical-align: middle;

HTML代码


    

第一行

第二行

CSS代码


父元素高度确定的多行文本设置垂直居中方法二

可以设置块状元素的display为table-cell,激活vertical-align属性。

HTML代码


    

内容1

内容2

内容3

CSS代码


CSS