CSS Tricks: Center Table
Using auto to split up the remaining space.
In this section, I will attempt to document and demonstrate how to overcome some of the little problems that many developers encounter while transitioning from transitional to strict doctypes.
How to Center a Table with CSS
Someone seems to have forgotten that blocks need to be centered. If text-align:center is so good, why did they forget to make a block-align:center? But they did! This one’s easy—once you realize the power of that little word, auto. Applied to opposing margins, auto means, “split and use up the remaining available space.” The result: block centering, even in a fluid layout.
The following CSS means “collapse the table to it’s contents and center it.”
table.ct {
width:auto; margin:0 auto 0 auto; }
 |
A CSS-centered, fluid table, with absmiddle-type text |
“If both margin-left and margin-right are auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.” —CSS2.1, 10.3.3 ¶7
