下圖是理想中的效果圖，外部容器的寬度和高度是固定的，中間的圖片寬度和高度未知，但是圖片要始終要相對于外部的容器垂直居中。

但是實際中實現(xiàn)的效果并不是很完美，由于各瀏覽器的解析都各不相同，所以各瀏覽器都會有1px-3px的偏差。

方法一 (XHTML 1.0 transitional)：

該方法是將外部容器的顯示模式設置成display:table，img標簽外部再嵌套一個span標簽，并設置span的顯示模式為display:table-cell，這樣就可以很方便的使用vertical-align象表格元素那樣對齊了，當然這只是在標準瀏覽器下，IE6/IE7還得使用定位。

HTML結構部分：

CSS樣式部分：

方法二 (XHTML 1.0 transitional)：

方法二和方法一的實現(xiàn)的原理大同小異，結構也是相同的，方法一用的是條件注釋，方法二就用的CSS Hack。

CSS樣式部分：

該方法有個弊端，在標準瀏覽器下由于外部容器#box的顯示模式為display:table-cell，所以導致#box無法使用margin屬性，并且在IE8下設置邊框也無效。

方法三 (XHTML 1.0 strict)：

標準瀏覽器還是將外部容器#box的顯示模式設置為display:table-cell，IE6/IE7是利用在img標簽的前面插入一對空標簽的辦法。

HTML結構部分：

CSS樣式部分：

方法三也同樣適用XHTML 1.0 transitional。以上方法都是收集于腳本之家，暫時只對這3個方法比較滿意，兼容性方面不錯，使用起來的限制也比較小，還有些方法我也都一一測試過，效果都不理想，在各瀏覽器中的差異比較大。另外司徒正美這里也收集了一些方法。

思考：很多方法都是依賴于將外部容器的顯示模式設置成table才能實現(xiàn)垂直居中，也就是div來模擬table，如果CSS有一個屬性來實現(xiàn)這種效果那該多好。

                 瑞安網(wǎng)站建設專業(yè)服務商--瑞安市聯(lián)創(chuàng)網(wǎng)絡信息有限公司    電話：13958850180