Question

我有桌子（页面上只有桌子）。它具有一行和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删除它们，则该单元格的内容将不在页面中心。它将更低和更正确。

也许我的方法是不正确的，我可以在不添加滚动条的情况下实现此目的，并且内容将位于中间。

这里是示例：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元素上将页边距设置为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 元素上添加 overflow：hidden ：

html {
  overflow: hidden; 
}

如何使用不带滚动条的表格居中放置元素？

3 个答案: