How to Vertically Align a Table in CSS

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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%