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>