未知高度的非表格垂直对齐
非已知高度的垂直对齐的条件：
- 表格单元格
- 行内块（
inline-block）
第一个比较好理解，第二个很多人可能会忽略。比如，很多人在图片与文本混排的时候想让图片相对于文本垂直居中除了用IE的私有特性 valign="absmiddle"别无他法。记住，默认下图片就是属于inline-block，你只需简单的img {vertical-align:middle;}即可。
那么，我们进入主题。现在我们由于某些特殊需要两个并排的div想实现垂直居中。如前所述，div非表格，但是当代的浏览器中除了IE都支持display:table-cell。恰好，IE支持dispaly:inline-block，那么我们就用两种方式为当代浏览器实现非表格的垂直居中，殊途同归。
HTML如下：
<div id="div1">blah blah...看见我居中了吗？</div>
<div id="div2">
<p>blah blah...</p>
....
</div>CSS如下：
#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}我们来重点分析CSS。如您所知，*property是一个只有IE（包括IE7）才能解析的hack. 那么为何是inline而不是inline-block呢？这跟IE的变态工作方式有关，具体不深究。在此你只需知道加上zoom:1后，就等价于inline-block。另外，如果是a, span等非block的元素，则按正常方式display:inline-block。
OK, 既然是tip, 废话不宜多，自己看例子：http://realazy.org/lab/div-valign/.
Update:严格地说，IE确实不支持inline-block，这就是为什么直接赋予div会不生效的问题。准确地说，在IE中，为inline赋予inline-block会使IE触发hasLayout，从而获得部分inline-block的表现。请参考：http://cn.autos.yahoo.com/as2007/sub1/index.html .
March 11th, 2007 at 11:24
“默认下图片就是属于inline-block”，思路一下子开扩了起来，哈哈哈～
March 11th, 2007 at 12:06
Great!
March 11th, 2007 at 17:04
文章不错！不过貌似zoom:1无法通过验证！
March 11th, 2007 at 19:33
那么为何是inline而不是inline-block呢？
详细可看《display:inline-block的深入理解》：http://www.planabc.net/article.asp?id=118
March 11th, 2007 at 20:22
可是为什么要让文字直接出现在div下呢？外头怎么不套个p呢？
March 12th, 2007 at 00:07
[...] 未知高度的非表格垂直对齐 [...]
March 13th, 2007 at 00:26
学到了！
March 13th, 2007 at 07:56
谢谢，我在ajax中国上得到你这个答案的。
我得指出一点，在IE中，由于div还不是table cell，所以有一个情况还是要注意的，就是右侧div的宽度。在你的例子中，右侧的每个p内文字足够长的话，会使得右div与左div不能保持在同一行内。从inline属性来说，这倒是对的。似乎只能靠指定右div的width来解决。
我还是对IE不支持某些CSS2以上的标准深恶痛绝。
March 20th, 2007 at 23:15
仔细研讲了realazy兄弟的实战宝贵经验，虽然对zoom:1 这个东东感觉不太熟悉，不过已经在了解中了，再次谢谢realazy的分享。
March 22nd, 2007 at 02:13
blog在mac下的ff上看，汉字会重叠起来~
April 2nd, 2007 at 19:00
嘿嘿，当时邮件问realazy的一个小问题如今有了比较优雅的解决。
感谢realazy again。
April 11th, 2007 at 11:54
不错的思路
April 11th, 2007 at 16:58
经常遇到这个问题,这个解决方法不错.
April 13th, 2007 at 15:56
受人恩惠
就要留下痕迹
April 13th, 2007 at 18:11
怿飞的《display:inline-block的深入理解》：http://www.planabc.net/article.asp?id=118中说 IE不支持 display:inline-block，本文确说IE支持， 弄晕了， 究竟支不支持啊/
April 17th, 2007 at 13:39
学习到了，思路又开阔了一些。
May 25th, 2007 at 11:31
又一技术，欣赏
June 24th, 2007 at 18:51
分析清楚，谢谢你的文章，我一星期都会来一会你的博客，呵呵
August 3rd, 2007 at 10:56
我刚才试了一下，在火狐里可以居中，可在IE里还是顶对齐
December 24th, 2007 at 11:53
LZ，你这个好象有点问题，我说一下。
这段代码无非是模仿td的valign=”middle”属性，我是这么理解的。
但是如果在“blah blah…看见我居中了吗？”这个容器中加入边框，FF下，跟TD是一样的，但是在IE下，边框紧帖着内容，这个问题应该如何解决
December 26th, 2007 at 15:17
非常仔细的设计师，呵呵！虽然我不完全赞同你的观点。IE确实在display：table等存在问题。
Good！
May 4th, 2008 at 16:15
不错的方法，只是在Safari下完全不起作用….
July 15th, 2008 at 18:20
恩，启发思路。应用表格单元格，和行内块实现垂直居中。
“*property是一个只有IE（包括IE7）才能解析的hack”
还不知道呢，又长知识了