多行文字水平居中的方案

Aug 22, 2019

对单行文字,可以简单的通过将line-height值设置为与容器的height相等的值,即可实现水平居中。

但是对于多行文字,一般有如下处理方式:
设置两个div容器,分别为外层容器和内层容器,设置外层容器的display属性为“table”,内层容器的display属性为“table-cell”,再在内层容器中设置vertical-align的值为“middle”,即可实现多行文字的水平居中。

代码实例

css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
.cen {
width: 100%;
background-color: #4faeda;
height: 500px;
display: table;
}

.vertical-cen {
color:#FFFFFF;
vertical-align: middle;
text-align: center;
display: table-cell;
}

html部分

1
2
3
4
5
6
7
<div class="cen">
<div class="vertical-cen">第1行文字<br>
第2行文字<br>
第3行文字<br>
第4行文字<br>
第5行文字</div>
</div>

效果如图: