如何以自动宽度方式居中显示Div

Question

我怎么能得到这样的东西才能有自动宽度（根据其中的内容变大/变小）：

<div id="example"><div id="foo">BlahBlah</div></div>

http://jsfiddle.net/PvfFy/901/

我尝试了各种解决方案，但似乎都没有。

那么如何让#example以自动宽度为中心？

Answer 1

尝试以百分比给出宽度。 width:80%;

Answer 2

请尝试使用此代码，看看它是否正在寻找

#example
{
 min-width: 100vw;
 height: 20vh;
 font-family: 'Open Sans';
 color: #869194;
 position: relative;
 margin: auto;
 box-sizing: border-box;
 background-color: blue;
 text-align: center;
 padding: 2vh
}

#foo {
 height: 100%;
 width: auto;
 margin: 1em auto;
}

http://jsfiddle.net/PvfFy/909/

Answer 3

#example {
  max-width: 100%;
  margin: 0 auto;
}