如何使用没有滚动条的表来居中元素？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用没有滚动条的表来居中元素？相关的知识，希望对你有一定的参考价值。
我有桌子（页面上只有桌子）。它有一行和一个单元格。
我想在页面上垂直和水平地居中这个单元格的内容。我是通过这样的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删除它们，则单元格的内容不会位于页面的中心。它会更低一些，更严格。
也许我的方法不正确，我可以实现这一点而不添加滚动条，内容将在中间。
答案
自动定义HTML的边距值。滚动条显示为此...您需要先重置它们。
* {
margin:0;
padding:0
}
table{
width: 100vw;
height: 100vh
}
td {
text-align: center;
vertical-align: middle;
}<table>
<tr><td>keks</td></tr>
</table>另一答案
我只想在body元素上将margin设置为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>另一答案
添加溢出：隐藏在html元素上：
html {
overflow: hidden;
}
以上是关于如何使用没有滚动条的表来居中元素？的主要内容，如果未能解决你的问题，请参考以下文章
怎么让div内的某个元素固定不随div的滚动条的滚动而滚动？
如何使网页的背景图片不随着滚动条移动 使背景图片固定？（要代码)