多行文本垂直居中的问题
在网页制作过程中，经常会碰到文字垂直居中的问题，单行文本居中使用line-height很容易解决，但是多行文本垂直居中，却不能使用此方法来设置，下面参考了各位网友的总结，有以下两种方法，供大家参考：
方法一：使用display:table和display:table-cell属性来模拟表格
- 对外围盒子设置display:table属性，模拟表格
2. 对文本外部包裹一个span标签，对其设置display:table-cell和vertical-align:middle属性
效果如图所示：
代码如下：
html代码：
1 <div class="box"> 2 <span> 3 <p>多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。</p> 4 </span> 5 6 </div>
css代码如下：
1 <style type="text/css"> 2 *{margin: 0;padding: 0;} 3 .box{ 4 margin: 40px auto; 5 border: 1px solid #ccc; 6 width: 300px; 7 height: 300px; 8 display: table; 9 } 10 .box span{ 11 display: table-cell; 12 vertical-align: middle; 13 } 14 </style>
此方法能够有效提高代码的可复用性，但是此方法不兼容IE6/7！
方法二：模拟单行文本来实现多行文本居中
- 对外围盒子设置固定宽高
- 对其设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。并且对其设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖盒子所给予的行高。
效果如图所示：
代码如下：
HTML代码：
1 <div class="box"> 2 3 <p>多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。</p> 4 5 6 </div>
css代码：
1 <style type="text/css"> 2 *{margin: 0;padding: 0;} 3 .box{ 4 margin: 40px auto; 5 border: 1px solid #ccc; 6 width: 300px; 7 height: 300px; 8 line-height: 300px; 9 } 10 .box p{ 11 display:inline-block; 12 line-height: 30px;/*覆盖父级元素的行高*/ 13 vertical-align: middle;/*基线居中对齐*/ 14 } 15 </style>
此方法能够很好地兼容IE6/7，但是有一点不足的是，文本的高度不能超过外部盒子的高度，如果超过盒子高度，此设置将不会有效果。如下图所示：