Jump to content

saila.com

Online media matters

How do I center a table using CSS?

The correct way to center block elements, like tables, in CSS is to set the margins to this:

margin-left: auto; margin-right: auto;

or the shorthand:

margin: auto;

Unfortunately, this doesn’t work om IE 4 through 5.5 (and version 6 in “quirks” mode. To get around that, the body should have the style rule text-align: center, but this will center the text in compliant browsers, as a result you have to do this:

body { text-align: center; }
#centerItem { text-align: left; margin: auto; }

For an comprehensive investigation into the above, read “Centering Tables” by Nicholas G. Theodorakis.