如何在CSS中垂直對齊表格

Question

如何垂直對齊與CSS的屏幕中間的表格？

Answer 1

一般來說，沿着這條線的東西在具有定義高度的任何塊元素中工作得非常好。

table { 
position: absolute; 
top: 50%; 
margin-top: -50%; 
} 

由於沒有定義的高度，所以居中在頁面上更困難，但我認爲這是有效的。

html { 
height: 100%; 
} 

您可能會遇到一些瀏覽器差異，並採取相應措施。

Answer 2

如果你可以給表格一個固定的高度，然後隨意調整我剛剛完成的this site的CSS。

有點複雜的解釋，但基本上你在內容周圍的屏幕高度的50％處設置了一個1像素高的'水平線'，然後將元素頂部居中（即你的表）偏移50％它的高度。

編輯：Here's the article我原來是從我的解決方案中，用解釋&的一切。

Answer 3

不久說，只是讓你的身體一個表，因爲垂直對齊不上表細胞的工作：

body, html { 
    height: 100%; 
} 

body { 
    display: table; 
} 

#wrapper { 
    display: table-cell; 
    vertical-align: middle; 
    height: 80%; 
} 

這將垂直對齊的pagewrapper以中，讓它成爲液體80％