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

Question

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

我想将此单元格的内容在页面上垂直和水平居中。我这样做是通过 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 删除它们，单元格的内容将不会位于页面的中心。会低一点，右一点。

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

Answer 1

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

html {
  overflow: hidden; 
}

Answer 2

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 3

我只是将 body 元素的边距设置为 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>

How to center element using tables without scrollbars?