html - 如何在 CSS 中垂直对齐表格

Question

如何将屏幕中间的表格与css垂直对齐？

Answer 1

一般来说，类似的东西在任何具有定义高度的块元素中都可以很好地工作。

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

由于您没有定义的高度，因此以页面为中心更难，但我认为这是可行的。

html {
 height: 100%;
}

您可能会遇到一些浏览器差异，请采取相应措施。

Answer 2

简而言之，只要让你的身体成为一个表格，因为垂直对齐确实适用于表格单元格：

body, html { 
  height: 100%; 
}

body { 
  display: table; 
}

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

这会将您的页面包装器垂直对齐到中间，并让它流动 80%

Answer 3

如果你可以给表格一个固定的高度，那么可以随意调整我刚刚完成的这个网站的 CSS。

解释起来有点复杂，但基本上你在内容周围 50% 的屏幕高度处设置了一个 1 像素高的“地平线”，然后将要居中的元素的顶部（即你的表格）偏移其高度的 50%。

编辑：这是我最初提出解决方案的文章，并附有解释和所有内容。