html - 如何根据电脑屏幕的宽高使表格居中？

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

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

伪元素

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

弹性盒

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

Answer 3

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