Html 如何根据电脑屏幕的宽度和高度使桌子居中？

我已经找到了很多关于这个问题的答案，但它们最终只是水平居中，而不是垂直居中

<table width="200" border="1">
<tr>
<th height="200" scope="col">&nbsp;</th>
</tr>
</table>

---

这有点傻，但在块内垂直对齐非表单元格确实很难。您必须知道元素的高度（并且它必须具有设置的高度）。不过，您的是通过

th

table {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

如果您不希望表格具有绝对定位，或者如果高度/宽度未知，则必须使用JavaScript

---

这有点傻，但在块内垂直对齐非表单元格确实很难。您必须知道元素的高度（并且它必须具有设置的高度）。不过，您的是通过

th

table {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

如果您不希望表格具有绝对定位，或者如果高度/宽度未知，则必须使用JavaScript

---

这两种技术都不需要知道居中元素的高度或宽度

伪元素

柔性箱

---

这两种技术都不需要知道居中元素的高度或宽度

伪元素

柔性箱

---

这行吗？垂直但不是水平@爆炸药丸，取决于这张桌子的高度。我宁愿用body的100%高度样式和显示表格单元格来实现它。@EL会很好，但我认为用纯CSS不可能。@Explosion Pills，是的，你是对的。这是老办法，但仍然有效这行吗？垂直但不是水平@爆炸药丸，取决于这张桌子的高度。我宁愿用body的100%高度样式和显示表格单元格来实现它。@EL会很好，但我认为用纯CSS不可能。@Explosion Pills，是的，你是对的。这是老办法，但仍然有效=）

body, html {
    height: 100%;
    margin: 0;
    text-align: center;
}

table {
    display: inline-table;
    vertical-align: middle;
}

body:before {
    content: '';
    display: inline-block;
    height: 100%;
    margin-left: -.25em;
    vertical-align: middle;
}

body, html {
  min-height: 100%;
  margin: 0;
}

body {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 100%;
}