多行文字和未知高度的图片水平垂直居中，这似乎是个古老的话题。
有用伪类:after或者:before实现，但低版本的IE无法支持。有用文字行高的1.14倍，可是针对容器的高度不同，IE版本浏览器的呈现也不尽相同。有用 display:table-cell 再结合 vertical-align:middle，可是IE6再一次把我们坑了，不支持。在这里，可见IE是比较万恶的。因为这些不兼容，或多或少的会让web开发人员“暴躁”起来。
垂直居中，css3的flexbox呢？或许现在还是早了点吧。
在CSS2里，说到水平垂直居中，难点还是在垂直居中。要使得元素垂直居中，究其本质，也就需要用到涉及垂直居中的css属性 vertical-align:middle , 可是block元素并不支持此属性，所以，我们必须将其转为display:inline-block;
这里需明确一点，就是 vertical-align:middle的元素必须有对照物。它的对照物就是相邻元素高度最大的那个，这里涉及到IFC（inline formating context），它是一种环境，这个环境存在的都是内联元素，如果在其中插入了块级元素，则这种环境会被破坏。
以下分别是多行文字和图片水平垂直居中的例子，实用且兼容：
多行文字水平垂直居中
<style>
body,p{margin:0;padding:0;}
#box{width:200px;height:200px;padding:0 30px;border:1px solid #ccc;margin:10px auto;font-size:0;line-height:20px;}
#box b{display:inline-block;_display:inline;zoom:1;vertical-align:middle;width:0;height:100%;}
#box p{display:inline-block;_display:inline;zoom:1;vertical-align:middle;font-size:12px;}
</style>
<div id="box">
<p>多行文字的显示，多行文字的显示，多行文字的显示，多行文字的显示，多行文字的显示</p>
<b></b>
</div>
|
图片垂直居中
<style>
body,ul{margin:0;padding:0;}
#box li{float:left;width:220px;height:250px;margin-right:12px;border:1px solid #ccc;text-align:center;list-style:none;}
#box .img_a{display:inline-block;_display:inline;zoom:1;vertical-align:middle;}
#box .img_b{display:inline-block;_display:inline;zoom:1;vertical-align:middle;width:0;height:100%;}
</style>
<div id="box">
<ul>
<li>
<img src="images/img1.jpg" class="img_a"/>
<img src="images/img.jpg" class="img_b"/>
</li>
<li>
<img src="images/img2.jpg" class="img_a"/>
<img src="images/img.jpg" class="img_b"/>
</li>
<li>
<img src="images/img3.jpg" class="img_a"/>
<img src="images/img.jpg" class="img_b"/>
</li>
</ul>
</div>
|
img.jpg可为随意图片。
补充于9月30日：
对于以上的图片对齐方法，或者你会觉得在图片后面还要增加一个多余的图片标签来作为对齐参照物可读性差，毕竟这图也需要加载。那么这里可以换成其他标签吗？
答案是肯定的，这里你也可以换成b，i等空标签，如果对ie6浏览器没要求，也可以用伪类。不过都要将它们转成inline-block元素哦。
<style>
.img_align{display:inline-block;_display:inline;zoom:1;vertical-align:middle;width:0;height:100%;}
</style>
<b class="img_align"></b>
|