如何使用没有滚动条的表来居中元素？

Question

我有桌子（页面上只有桌子）。它有一行和一个单元格。

我想在页面上垂直和水平地居中这个单元格的内容。我是通过这样的html和css来做这件事的。

HTML：

<table>
  <tr><td>keks</td></tr>
</table>

CSS：

html, body, table, tr, td {
  width: 100%;
  height: 100%;
}

td {
  text-align: center;
  vertical-align: middle;
}

但是这种方法增加了滚动条（垂直和水平）。如何删除滚动条？如果我通过scrollbar: hidden删除它们，则单元格的内容不会位于页面的中心。它会更低一些，更严格。

也许我的方法不正确，我可以实现这一点而不添加滚动条，内容将在中间。

这是一个例子：https://jsfiddle.net/0tpL9o7e/

Answer 1

自动定义HTML的边距值。滚动条显示为此...您需要先重置它们。

* {
  margin:0;
  padding:0
}

table{
  width: 100vw;
  height: 100vh
}

td {
  text-align: center;
  vertical-align: middle;
}

<table>
  <tr><td>keks</td></tr>
</table>

Answer 2

我只想在body元素上将margin设置为0，因为这就是创建滚动条的原因。

您还可以通过设置overflow:hidden来隐藏滚动，但这样您可能会阻止用户看到稍后会出现的某些内容。

在基于webkit的浏览器中，您实际上可以使用::-webkit-scrollbar { display: none; }隐藏滚动条，同时仍然可以滚动，只是没有显示条形图。

html, body, table, tr, td {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
}

td {
  text-align: center;
  vertical-align: middle;
}

<table>
  <tr><td>keks</td></tr>
</table>

Answer 3

添加溢出：隐藏在html元素上：

html {
  overflow: hidden; 
}