嵌套DIV的水平居中

如何在一个DIV中实现另一个水平居中的DIV呢？
HTML代码如下

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

 CSS代码如下

#inner {
    width: 50%;
    margin: 0 auto; 
}

当然，你不必宽度设置为50%。任何宽度小于外部的DIV都可以。