css-使用line-height实现垂直居中的一些问题

网上都是这么说的，把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的，但其实也是有问题的。问题在于height，看我的表述：“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”，差别在于我把height去掉了，这个height是多余的，您不信您可以自己试试。

多行文字的垂直居中

要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div，里面文字单行或多行显示，字体大小有大有小的情况怎么办呢？方法之一就是借助于line-height。

下图为demo页面的截图批注图：

正如上面所说，line boxes的高度取决于它的下属职员的最高高度。而这个高度由一个不占据任何空间的空格完成，方法即使设置font-size为0，line-height为所需要的高度。同时，我们为了分隔line boxes，同时要保持在一行上，需要设置display属性为inline-block。如下代码，有别于demo：

css代码：

.mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px; font-size:0;}
.mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
.mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle;}

感谢小西的提醒，下为修复IE8问题后的代码：

 .mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;}
 .mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
 ;;}

html代码：

 <p class="mulit_line">
     <span >这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br />这里是第二行，用来测试多行的显示效果。</span><i>&nbsp;</i>
 </p>

摘录自张鑫旭的博客，更多：http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html

总结：

要在一个固定大小的div中的多行文字垂直居中：

 <div class="yellowbox">
     <p><span>Guangzhou Haisan Entertainment Technology Co., Ltd.: The No.1 water park equipment company in China</span></p>
 </div>

第一步、将文字放在p元素下的span中。

第二步、将p元素设置高度与div一致（p的line-height=div的height）。

第三步、span为inline-block且vertical-align为middle（line-height重新设置）。

另一种方法：

 <div class="content-cases-box">
                 <div class="box1">
                     <h3>/ Dream-valley Water Park /</h3>
                     <p>Dream-valley Water Park locates in "Chinese Hollywood" Hengdian world studios,one of the AAAA resort. Haisan took over the whole project from planning, landscape design, equipments production and construction service. This ...</p>
                 </div>
                 <i></i>
 </div>

 .content-cases-box{
     margin:0 auto;
     width: 920px;
     height: 220px;
     background-color: #fff;
     opacity: 0.8;
     border-radius: 18px;
 }
 .content-cases-box .box1{
     padding-left: 45px;
     padding-right: 45px;
     vertical-align: middle;
     display: inline-block;
 }
 .content-cases-box i{
     height: 100%;
     width: 0;
     vertical-align: middle;
     display: inline-block;
 }

i元素于div一样高，垂直对齐并内联块状，然后内容区内敛块状并垂直对齐。

火狐能用，其他浏览器没效果