以未知宽度居中的div

Question

我有div <div id="container"></div>包含所有页面内容,包括页眉页脚等.

所以我想把这个div放在我页面的中心,现在我有这个css:

#page{
position:relative;
margin:auto;
width:1000px;
}

它的工作原理,但我的问题是这个div中的内容不断变化所以宽度也会发生变化,它可能是1000px或者10100px我需要类似的东西width:auto;,怎么能做到这样呢？

Answer 1

请参阅: http ://jsfiddle.net/thirtydot/rjY7F/

HTML:

<div id="container">
    i'm as wide as my content
</div>

CSS:

body {
    text-align: center;
}
#container {
    text-align: left;
    border: 1px solid red;
    display: inline-block;
    /* for ie6/7: */
    *display: inline;
    zoom: 1;
}

Answer 2

一种方法是在#page元素周围创建一个包装器,让我们调用它#wrapper:

#wrapper {
   position: relative;
   left: 50%;
   float: left;
}
#page {
   position: relative;
   left: -50%;
   float: left;
}

这将允许#pagediv保持可变宽度.

Answer 3

这将为您提供一个非常大小的div,它位于身体的中心,是适合内容所需的最小尺寸:

body { text-align: center; }
div.container { display: inline-block; text-align: left; }