0

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

我想在页面上垂直和水平地居中这个单元格的内容。我是通过这样的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/

4

3 回答 3

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>

于 2018-12-29T13:10:13.853 回答
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>

于 2018-12-29T13:32:02.373 回答
0

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

html {
  overflow: hidden; 
}
于 2018-12-29T13:04:50.563 回答