CSS之未知高度多行文本垂直居中

一直比较纠结垂直居中的问题，最近又查阅了一些资料，借鉴了一些优秀方案，捣鼓出了一个兼容性较强的多行文本垂直居中解决方案，主要思路依然是利用vertical-align:middle来实现，经过测试，该方案能兼容IE6及以上版本的浏览器，先看代码：

 1 <style type="text/css">
 2 .box {
 3     border: 1px dashed #cccccc;
 4     height: 300px;
 5     font-size: 0;
 6 }
 7 .box p, .box i {
 8     display: inline-block;
 9     vertical-align: middle;
10     overflow: hidden;
11     *display:inline;
12     *zoom:1;
13 }
14 .box i {
15     height: 100%;
16     width: 0;
17 }
18 .box p {
19     font-size: 14px;
20     width: 100%;
21 }
22 </style>
23 <div class="box">
24   <p class="text">多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居</p>
25   <i></i>
26  </div>

关于该方案有几点说明：

1.行元素的vertical-middle属性需要一个参照物，所以这里在需要垂直居中的多行文本后面增加了一个空标签<i></i>，让需要垂直居中的元素相对于这个空标签垂直居中，另外将空标签的高度设为100%也是该方案的关键

2.设置垂直居中元素<p></p>和参照物<i></i>的display为inline-block，这样两个元素就能现实在一行之中

3.设置父元素<div></div>的font-size为0是为了解决inline-block之间的空格问题，保证元素<p></p>和参照物<i></i>显示在同一行

该方案主要思路是为需要垂直居中的元素找到一参照元素并保证它们同一行显示，从而达到多行文本垂直居中。如果不需要兼容IE6\7，参照元素<i></i>可以用:after或者:before来代替