非已知高度的垂直對齊的條件：

• 表格單元格
• 行內塊（inline-block）

第一個(gè)比較好理解，第二個(gè)很多人可能會(huì )忽略。比如，很多人在圖片與文本混排的時(shí)候想讓圖片相對于文本垂直居中除了用IE的私有特性 valign="absmiddle"別無(wú)他法。記住，默認下圖片就是屬于inline-block，你只需簡(jiǎn)單的img {vertical-align:middle;}即可。

那么，我們進(jìn)入主題?，F在我們由于某些特殊需要兩個(gè)并排的div想實(shí)現垂直居中。如前所述，div非表格，但是當代的瀏覽器中除了IE都支持display:table-cell。恰好，IE支持dispaly:inline-block，那么我們就用兩種方式為當代瀏覽器實(shí)現非表格的垂直居中，殊途同歸。

HTML如下：

<div id="div1">blah blah...看見(jiàn)我居中了嗎？</div><div id="div2"><p>blah blah...</p>....</div>

CSS如下：

#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}

我們來(lái)重點(diǎn)分析CSS。如您所知，*property是一個(gè)只有IE（包括IE7）才能解析的hack. 那么為何是inline而不是inline-block呢？這跟IE的變態(tài)工作方式有關(guān)，具體不深究。在此你只需知道加上zoom:1后，就等價(jià)于inline-block。另外，如果是a, span等非block的元素，則按正常方式display:inline-block。

OK, 既然是tip, 廢話(huà)不宜多，自己看例子：http://realazy.org/lab/div-valign/.

Update:嚴格地說(shuō)，IE確實(shí)不支持inline-block，這就是為什么直接賦予div會(huì )不生效的問(wèn)題。準確地說(shuō)，在IE中，為inline賦予inline-block會(huì )使IE觸發(fā)hasLayout，從而獲得部分inline-block的表現。請參考：http://cn.autos.yahoo.com/as2007/sub1/index.html .