How can I vertically align a table in the middle of the screen with css?
A:
Check out this article on the topic of getting a 100% height in pure CSS, cross-browser.
Dave Markle
2009-01-12 22:58:10
+1
A:
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.
Mike Robinson
2009-01-12 23:00:49
Usually I wind up with something like this, except with a wrapper class around the table (because you need the top property to be on the outer element and the margin-top to be on the inner element.
Jimmy
2009-01-12 23:10:15
A:
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.
da5id
2009-01-13 01:35:08