html不定高度多行文本垂直居中.docVIP

多行文本在不定高度的容器中垂直居中的方法有很多。刚做前端两个月，参考了别人的方法，这里先写几种，以后会的多了再增加。 第一种多行文本垂直居中的方法，如果不考虑IE8以下的版本，那么可以用display:table-cell和vertical-align:middle这两个css属性。代码及效果图如下： CSS样式： .box display:table-cell; vertical-align:middle; background-color:#CC6; height:300px; width:80%; .box p width:60%; margin:0 auto; text-align:left; HTML结构： div class box 文字可以垂直中文字可以垂直居中文字可以垂直居中文字可以垂直居中文字可以垂直中 第二种多行文本垂直居中的方法，用伪元素:after配合display:inline-block和vertical-align:middle来使文字垂直居中。代码及效果图如下： CSS代码： .box width:100%; height:300px; background-color:#CC6; vertical-align:middle; font-size:0; .box:after content:; display:inline-block; background-color:#90C; width:0px; height:100%; vertical-align:middle; p vertical-align:middle; font-size:16px; display:inline-block; width:auto; HTML结构代码： div class box 文字可以垂直中文字可以垂直居中文字可以垂直居中文字可以垂直居中文字可以垂直中 可以看到效果跟第一种差不多，如果把.box:after的宽度设置为10px，你会发现效果如下图： 其中.box中font-size:0是为了消除display:inline-block元素之间的空隙，产生 inline-block 空隙的根本性原因是：HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，因此产生了元素间的空隙。