CSSのテーブルを垂直方向に揃える方法 -- html フィールド と css フィールド と html-table フィールド 関連 問題

How can I vertically align a table in the middle of the screen with css?

Generally something along the lines of this works pretty well in any block element with a defined height.

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

Centering on the page is harder since you don't have a defined height, but I think this works.

html {  height: 100%; } 

You may encounter some browser differences, act accordingly.

Shortly said, just make your body a table, because vertical-align does work on table-cells:

body, html {    height: 100%;  }  body {    display: table;  }  #wrapper {    display: table-cell;    vertical-align: middle;   height: 80%; } 

This will vertical align your pagewrapper to middle and let it be fluid 80%

If you can give the table a fixed height, then feel free to adapt the CSS from this site I've just done.

Bit complicated to explain, but basically you set a 1 pixel high 'horizon' at 50% height of the screen around your content, then offset the top of the element to be centred (i.e. your table) by 50% of its height.

EDIT: Here's the article I originally made my solution from, with explanation & everything.