Css: How to center a variable width content

Centering a fixed width div is relatively easy

div#Foo {
   margin: 0 auto;
   left: 0;
   right: 0;
   width: 500px;
   position: absolute;
}

Just place this in positioned box and that's all.

But if the thing is gonna be variable width, it's a little bit more complicated.

* Put your content in a floated div, and give it a left: -50%, make it relative:

{
   position: relative;
   float: left;
   left: -50%;
}

* Put this div in another floated div, and this time with:

{
   position: relative;
   float: left;
   left: 50%;
}

Voila.

source http://www.tightcss.com/centering/center_variable_width.htm