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

Question

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

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

Answer 1

这有点傻，但在块内垂直对齐非桌面单元真的很难。你必须知道元素的高度（它必须有一个设定的高度）。不过，你可以通过th。

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

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

http://jsfiddle.net/7JeCb/1/

Answer 2

  <table style="left:50%; top:50%; position:relative;">
    <tr>
       <td></td>
       <td><td>
    </tr>
    <tr>
       <td></td>
       <td><td>
    </tr>
  </table>

Answer 3

这些技术都不需要知道元素的高度或宽度是否居中。

伪元素

http://jsfiddle.net/7JeCb/12/

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;
}

Flexbox的

http://jsfiddle.net/7JeCb/11/

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%;
}