2024年5月11日发(作者：)
多行文本在不定高度的容器中垂直居中的方法有很多。刚做前端两个月，参考了别人
的方法，这里先写几种，以后会的多了再增加。
第一种多行文本垂直居中的方法，如果不考虑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结构：
文字可以垂直中文字可以垂直居中文字可以垂直居中文字可以垂直居中文字可以
垂直中
第二种多行文本垂直居中的方法，用伪元素: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结构代码：
文字可以垂直中文字可以垂直居中文字可以垂直居中文字可以垂直居中文字可以
垂直中
可以看到效果跟第一种差不多，如果把.box:after的宽度设置为10px，你会发现效果
如下图：
其中.box中font-size:0是为了消除display:inline-block元素之间的空隙，产生
inline-block 空隙的根本性原因是：HTML 中的换行符、空格符、制表符等合并为空白符，
字体大小不为 0 的情况下，空白符自然占据一定的宽度，因此产生了元素间的空隙。如果
宽度不够，紫色的竖条可能会跑到文字的下方。
文字垂直居中的属性vertical-align:middle是有相对元素的，相对于谁垂直居中，这
里设置了after伪元素，高度为100%，与外边的容器.box同样高，文本相对于它垂直居
中，也就等于是相对于外边的容器垂直居中了。
文章首发于言小鱼的个人博客
发布评论