相似table的固定容器高度的CSS垂直居中方法

垂直居中的方法不少，可是每次要面對解決具體的需求時，每次都糾結不爽，由於一方面要兼容IE，另外一方面，用table佈局總感受被鄙視（本身太能YY了，其實我以爲纔沒人懶得看是怎麼實現的）。又遇到須要圖片居中的效果了，又犯愁了，在糾結該如何能比較簡潔的實現圖片居中，而且圖片的高度是未知的。

每次作完頁面，不多作技術總結；這麼長時間下來，也沒積累太多幹貨，想一想也真是汗顏。臨時在google，baidu上，看到各類技巧，到最後本身作的時候，老是缺點火候，不是偏低一些，就是那偏高一些，什麼line-height什麼的，原理不瞭解，拿來就用，怎麼可能能達到想要的效果呢？看來本身的學習態度和方法還真要改一改了。

翻來翻去，終於在一個不太常常逛的網站上，看到一個大牛寫的一個兼容IE和其餘瀏覽器的方案，讓我眼前一亮；總結一下呢就是：支持display:table 的就用display:table-cell佈局；對於IE6-7，則充分利用IE的佈局bug來解決。

1. 既然支持display:table了，那就好說，直接按照相似表格佈局就能夠了。最後實踐了一下發現，元素的寬度沒有了，就連設置了width:100% 也很差用了，只能寫一個固定值才能夠；想一想這也沒辦法，外邊沒有table元素，寬度百分好比何計算呢？不過，幸虧我這沒有自適應寬度一說，能夠安心的使用。

2. 奇葩的IE6-7，就充分利用他們的佈局BUG就行了；兼容IE6-7和現代瀏覽器的垂直居中代碼，簡單粗暴，代碼以下。
css代碼：

.mock-td{ display: table-cell; vertical-align: middle; *position: relative; height: 80px; background: #eee; }
.mock-td-ie7{ *position:absolute; top: 50%; background: red; width:400px; }
.mock-td-div{ *position: relative; top:-50%; height: 40px; width:300px; background: #ccc; }

html代碼

<div class="mock-td">
    <div class="mock-td-ie7">
        <div class="mock-td-div">除了IE6-7，其餘都居中了</div>
    </div>
</div>

整體來講，實現思路是3個容器嵌套，1)最外層相似單元格 td 的做用；2)而後中間容器絕對定位，向下偏移一半的高度；3)最後一層容器，就是本身的內容了，相對定位position:relative;top:-50%;關鍵的一點就是這個-50%的top，其餘瀏覽器都不向上偏移，只有IE6-7向上偏了一半的高度，好像那是中間絕對定位的元素高度固定了同樣；而其餘瀏覽器，只有中間容器固定高度，纔會向上偏一半的高度，不然認爲高度爲0，即便不使用絕對定位，使用相對定位，高度即便被子元素撐起來，也不會向上偏移一半的高度，真是奇了怪了。

 

效果圖下，IE6-7和Chrome瀏覽器

（這個是IE6-7下效果）

（這個是Chrome下效果）

擴展聯想一下，原來作固定容器高度的元素居中時，通常是：position:absolute; top:50%; margin-top:-1*height/2; 因而就嘗試一下這種方案是否可行。但因爲是高度未知的元素，margin使用百分比時是按照寬度計算的，沒辦法，只能更改文檔書寫方式了。代碼以下，IE6-8下依舊無效，Firefox下沒有writing-mode樣式，只能在webkit下娛樂一下了。

.mock-td2{ height: 80px; position:relative;  background: #eee; }
.mock-td2-margin-dir{ position:relative; top:50%; -webkit-writing-mode: vertical-lr; background: red; }
.mock-td2-margin-top{ margin:-50% 0 0 0; }
.mock-td2-div{ -webkit-writing-mode: horizontal-tb; height: 40px; width:400px; background: #ccc; }

html代碼：

<div class="mock-td2">
    <div class="mock-td2-margin-dir">
        <div class="mock-td2-margin-top">
            <div class="mock-td2-div">負一半 margin-top 高度，只能在 webkit 無聊娛樂下</div>
        </div>
    </div>
</div>

效果以下：

（只在Chrome下有效）

 

說到最後，總結一下呢，最簡單容易理解的方案，仍是使用table佈局，你們都懂，還易維護，兼容性又好，何樂不爲呢？

 

注：IE6-7方法來自 http://www.blueidea.com/tech/web/2006/3231.asp，感謝這位前輩。