Как центрировать таблицу в соответствии с шириной и высотой экрана компьютера?

Question

Я нашел много ответов на этот вопрос, но они просто центрируют его по горизонтали, а не по вертикали.

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

Answer 1

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

Answer 2

Это немного глупо, но и по вертикали выравнивания без ячеек таблицы внутри блоков действительно трудно. Вы должны знать высоту элемента (и он должен иметь заданную высоту). Однако ваш, через th.

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

Если вы не хотите, чтобы таблица имеет absolute позиционирование, или если высота/ширина не известны, вы должны использовать JavaScript.

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

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