如何使用没有滚动条的表格对元素进行居中？
如何使用没有滚动条的表格对元素进行居中？
提问于 2018-12-29 12:57:33
我有桌子(只有页上的桌子)。它有一行和一个单元格。
我希望将此单元格的内容垂直和水平地集中在页面上。我是这样做的，通过这样的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删除它们，单元格的内容将不会位于页面的中心。它会更低一点，更容易。
此外，也许我的方法是不正确的，我可以做到这一点，而不添加滚动条和内容将在中间。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-12-29 13:10:13
HTML有自动定义的页边距值。滚动条出现在这个..。你得先重置它们。
* {
margin:0;
padding:0
}
table{
width: 100vw;
height: 100vh
}
td {
text-align: center;
vertical-align: middle;
}<table>
<tr><td>keks</td></tr>
</table>
Stack Overflow用户
发布于 2018-12-29 13:32:02
我将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>
Stack Overflow用户
发布于 2018-12-29 13:04:50
在overflow:hidden html元素上添加：
html {
overflow: hidden;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53969739
复制相关文章
相似问题
腾讯云开发者
