如何在CSS中垂直对齐表

Question

如何使用css垂直对齐屏幕中间的表格？

Answer 1

通常，在具有定义高度的任何块元素中，某些行都可以很好地工作。

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

由于您没有定义的高度，因此在页面上居中会更难，但我认为这样可行。

html {
 height: 100%;
}

您可能会遇到一些浏览器差异，并采取相应行动。

Answer 2

简单地说，只是让你的身体成为一个桌子，因为vertical-align确实可以用于桌面细胞：

body, html { 
  height: 100%; 
}

body { 
  display: table; 
}

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

这会将您的pagewrapper垂直对齐到中间，让它成为流畅的80％

Answer 3

如果你可以给桌子一个固定的高度，那么随意调整我刚刚完成的this site的CSS。

有点难以解释，但基本上你在屏幕周围50％高度处设置一个1像素高的'视野'，然后将元素的顶部偏移到中心（即你的桌子）的50％高度。

编辑：Here's the article我最初是通过解释＆amp;一切。