垂直居中的方法很多，但是每次要面對解決具體的需求時，每次都糾結不爽，因為一方面要相容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.mock-td-ie7.mock-td-divhtml**
<總體來說，實現思路是3個容器巢狀，1)最外層類似單元格 td 的作用；2)然後中間容器絕對定位，向下偏移一半的高度；3)最後一層容器，就是自己的內容了，相對定位position:relative;top:-50%;關鍵的一點就是這個-50%的top，其他瀏覽器都不向上偏移，只有ie6-7向上偏了一半的高度，好像那是中間絕對定位的元素高度固定了一樣；而其他瀏覽器，只有中間容器固定高度，才會向上偏一半的高度，否則認為高度為0，即使不使用絕對定位，使用相對定位，高度即使被子元素撐起來，也不會向上偏移一半的高度，真是奇了怪了。div
class
="mock-td"
>
<
div
class
="mock-td-ie7"
>
<
div
class
="mock-td-div"
>除了ie6-7，其他都居中了
div>
div>
div>
效果圖下，ie6-7和chrome瀏覽器
（這個是ie6-7下效果）
（這個是chrome下效果）
擴充套件聯想一下，原來做固定容器高度的元素居中時，一般是：position:absolute; top:50%; margin-top:-1*height/2; 於是就嘗試一下這種方案是否可行。但由於是高度未知的元素，margin使用百分比時是按照寬度計算的，沒辦法，只能更改文件書寫方式了。**如下，ie6-8下依舊無效，firefox下沒有writing-mode樣式，只能在webkit下娛樂一下了。
.mock-td2.mock-td2-margin-dir.mock-td2-margin-top.mock-td2-divhtml**：
<效果如下：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方法來自 感謝這位前輩。
固定table的表頭
原貼 另可參考 根據固定表頭的兩種方式 固定表頭兩種方式 1.表頭和表內容分別在兩個table中,互不干擾.優點 實現簡單 缺點 兩個table 的列寬不好保持一致,缺乏靈活性 2.用標籤的屬性來處理 html view plain copy span style font size 18px ht...
固定表頭的table
在前端的開發過程中，時經常使用的一種展現形式。在我的開發過程中，當資料過多時，最常用的一種方式就是分頁，但是有些地方還是需要滾動。通常的table 會隨著滾動，導致表頭看不見。一下是我找到的一種固定表頭的方法。如下 div class t head table class table style c...
關於table設定固定寬度高度自適應
標籤 分類 計算機 開發 指令碼 web應用的頁面，的表現形式是常常遇到的，在列數有限的前提下，如何將各列中的內容自適應到不同解析度的螢幕，這應該是乙個比較容易遇到的問題，下面就來談一談我對這類問題的解決與看法。將所有列設定為固定寬度，顯然是不能滿足此類要求的，但是若把全部的列都設定為百分比，恐怕在...