多行文字垂直居中

单行文字垂直居中比较简单，只需将 line-height 属性值与其父元素的 height 属性值设为相等即可。如下所示：

.text{   line-height: 20px;   height: 20px; } 

HTML代码：

<div class="content"> <span class="text">这是第一段文字</span>     <span class="text">这是第二段文字</span>     <span class="text">这是第三段文字</span>     <span class="text">这是第四段文字</span>     <span class="text">这是第五段文字</span>     <span class="text">这是第六段文字</span>     <span class="text">...</span> </div>

CSS代码：

.content{     /* 此宽高属性可根据自己的需求更改 */     width: 300px;     height:300px;     background: #eee;     /* 关键代码 */     display: table-cell;     text-align: center;     vertical-align: middle; } .text{     /* 若该元素为行内或块级元素则必须设置以下属性 */     display: inline-block; }

特别注意：居中的文字必须用HTML标签包裹，并且要将包裹该文字的标签设置为
display : inline-block；

文章来源: 多行文字垂直居中