html - 如何使屏幕的表格居中(垂直和水平)

Question

我有这些代码块:

<table border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>

我想在屏幕中央(垂直和水平)显示我的表格。

Here is a demo .

我该怎么做？

Answer 1

水平居中很容易。您只需要将两个边距都设置为“自动”:

table {
  margin-left: auto;
  margin-right: auto;
}

垂直居中通常是通过将父元素显示类型设置为table-cell来实现的。并使用 vertical-align属性(property)。假设你有一个 <div class="wrapper">在你的 table 周围:

.wrapper {
  display: table-cell;
  vertical-align: middle;
}

可以在http://www.w3.org/Style/Examples/007/center 上找到更多详细信息。

如果您需要对旧版 Internet Explorer 的支持(我不知道在这个奇怪且很少使用的浏览器的哪个版本中有什么用;-))那么您可能需要 search the web了解更多信息，例如:http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (只是第一次点击，似乎提到了IE)