DIV（块级对象）|文字居中对齐|图片和文本|垂直居中|问题

关于使用 display: table-cell; *display: inline; zoom: 1; 的方法的一些说明：
标准浏览器如firefox本身支持display: table-cell，所以DIV这时就相当于一个TD，vertical-align在TD中始终是有效的，所以你可以像控制TD那样控制DIV中任何内容的顶对齐、垂直居中以及底对齐。
但在IE下就不行，IE只是通过模拟出一个hasLayout的块级对象来实现垂直方向的对齐，通常不复杂的情况都没有问题，如：连续的垂直居中。但是，复杂的应用就不清楚IE是怎么实现vertical-align这一属性。
<style type="text/css">
.pic, .info, .num { display: table-cell; *display: inline; zoom: 1; }
.info { vertical-align: middle; }
.pic { vertical-align: bottom; }
.num { vertical-align: bottom; }
</style>
<div>
    <div class="info">Info</div>
    <div class="pic"><img src="http://www.baidu.com/img/logo.gif" /></div>
    <div class="num">123,456</div>
</div>
上例中，期望info能垂直居中，pic和num都是底对齐，firefox下一切正常，因为这三个div就相当于一行中的三个TD，完全支持vertical-align。而到IE下就不对了，info变成了顶对齐，为什么这样还不知道，有时间要好好研究一下。

另外给出一种已知高度下内容垂直居中的方法：
<style type="text/css">
#outer {height: 400px; overflow: hidden; position: relative;}
#middle {position: absolute; top: 50%;}
#inner {position: relative; top: -50%}
</style>
<div id="outer">
<div id="middle">
    <div id="inner">
      any text<br>
      any height<br>
      any content, for example generated from DB
      everything is vertically centered
    </div>
</div>
</div>

原文来自:http://hi.baidu.com/kouke22/blog/item/ad130608dd2ae535e9248831.html