How can I let a div automatically set it own width?

Solution with inline-block

You could try display: inline-block and see if that works in your situation. However, you won't be able to center it using margin-left: auto & margin-right: auto because that technique requires a width value.

If possible, use display: inline-block and set text-align: center on it's container.

<div style="text-align: center">
  <div style="display: inline-block;">
     This will expand only as far as it needs to
  </div>
</div>

Solution using Flexbox + container div

The original answer above was written in 2011, before flexbox was implemented. You can achieve a similar effect

<div style="display: flex; justify-content: center;">
  <div>
     This will expand only as far as it needs to
  </div>
</div>

Solution without container div

There is another way to do this without a parent element.

1. Set display to inline-block to make the div width fit to its content.
2. Use position: relative and left: 50% to position its left edge to 50% of its containing element.
3. Use transform: translateX(-50%) which will "shift" the element to the left by half its own width.

.center {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

For those of you who are still coming across this issue, nowadays you can handle this with:

<div>
  <div style="display: table; margin: auto">
    This will expand only as far as it needs to
  </div>
</div>

Here is a new fiddle based on the accepted answer: http://jsfiddle.net/j33qL8pa/1/

I think this works nowadays:

.center
{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}