How to center a block level element vertically?

Question

Say I have a like so:

<table style="margin-left: auto; margin-right: auto;">
  <tr>
    <td>
    </td>
  </tr>
</table>

The margin-* attributes instruct the table to center itself within its parent element.

Is there a similar way to center the element vertically?

Answer 1

This is a very often requested thing to do. There's no simple way to do vertical alignment. There's the vertical-align attribute, but it's for line-alignment of an inline element. Check out this link for different ways to do vertical-centering.

Edit: Here's another good link to get you started.

Answer 2

I know this is an old question, but for anyone who stumbles across this in search of a solution to a similar question, I've written a jQuery plugin that can center any block element very easily. This is not to promote my own project, I honestly just want to help out and contribute where I can. There's a link and demo here .