CSS: Centered and shrinked box without fixed width

All versions tested with IE5.5, IE6, IE7, IE8, FF1.5, FF2, FF3, Opera 9, Chrome 4

table short version (no xhtml validation)

Without a surrounding div you don't need to use css definitions to center,
but you aren't as flexible as with css definitions if you want to use the
same template with different css definitions.

table

display:table

display:table short version (no xhtml validation)

display:inline-block

FF1.5 and FF2 need the third div to unset "display:-moz-inline-box" or
all nested elements will float

display:inline-block with float:left div div

float:left with div div

Bug in IE5.5: outer div has to much height

float:left with ul li
<style type="text/css"> #flll { overflow:hidden; height:100%; text-align:center; } #flll ul { padding:0; margin:0; list-style-type:none; float:left; position:relative; left:50%; } #flll ul li { float:left; position:relative; right:50% } </style> <div id="flll"> <ul> <li> ... </li> </ul> </div>

Bug in IE5.5: outer div has to much height

display:table-cell (no xhtml validation)

Bug in IE8: strange border placement (the blue debug border)
align="center" is needed by FF1.5 and FF2