Center a div, as width as its content - html

Question

I want to center a DIV which width is unknown. It should be as width as the actual content. I tried:
<div style="background-color: red; width: 300px; text-align: center; margin: 0 auto;">dsffsffsfsddf</div>
it only works when "width" is set. Auto wont help.

Answer 1

display: table; margin: 0 auto;
http://jsfiddle.net/vabxz/

Answer 2

div{
display:table
margin:0 auto;
}

Answer 3

Take a look at this previous answer: centering variable width divs
But one answer is to basically use css-floats
<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>
<div id="hideoverflow">
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo libero, commodo ut iaculis in, placerat vel purus.
</div>
</div>
</div>

Answer 4

It's quite simple (http://jsfiddle.net/bukfixart/tYyJN/):
<div style="border:1px solid #000;text-align:center;">
<div style="border: 1px solid #f00; display:inline-block;">some content</div>
</div>
The key points are text-align:center for the outer box and display:inline-block for the inner box

Answer 5

Check out my fiddle: http://jsfiddle.net/PRUBd/
CSS
body {
text-align: center;
}
#container {
text-align: left;
border: 1px solid black;
padding: 10px;
display: inline-block;
}
HTML
<div id="container">
This div is as wide as its content and centered!
</div>