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

【问题标题】：How to center element using tables without scrollbars?如何使用没有滚动条的表格使元素居中？
【发布时间】：2019-05-26 22:34:37
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

我只是将 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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

在 html 元素上添加 overflow:hidden：

html {
  overflow: hidden; 
}

【讨论】：

是的，这将隐藏滚动条，但内容会稍微靠右并低于页面中心。您的答案回答了如何删除滚动条，但内容不居中:(这是溢出的示例：隐藏。jsfiddle.net/14wgunoL。如果您将视口设置得非常低，您将能够看到内容未居中。