居中未知宽度的div

Question

我有一个div <div id="container"></div>，它包含了页面的所有内容，包括页头、页脚等。

因此，我想把这个div居中到页面的中央，现在我有以下的css：

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

代码可以正常工作，但我的问题是这个

中的内容会不断变化，所以宽度也会改变，可能是1000px或10100px，所以我需要像width:auto;这样的东西，如何做到这一点？

- Linas

---

你的意思是：https://dev59.com/anVC5IYBdhLWcg3wsTbv？ - Snake Eyes

@Michael 我认为他并没有遇到居中的问题（在这种情况下标题有点误导）。如果你读了问题，他遇到的问题是内容的宽度。 - Josh Darnell

你是在问如何水平居中一个宽度未知的元素吗？ - thirtydot

这个 div 叫做 #page 还是 #container？ - PiTheNumber

是的，我可以将其居中而不会出现任何问题，但为此我需要使用width：一些px; 如果我的内容宽度变得比容器更大或更小，则某些页面元素会混乱。 - Linas

@SnakeEyes，你的链接指向了如何使用jQuery居中一个div的方法。 - TARKUS

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;
}

- thirtydot

---

我刚刚编辑了你的jsfiddle，并删除了#container的所有样式，它仍然可以工作。我猜测是在body上的text-align起了作用？在Firefox中测试过。 - Code Poet

@CodePoet：这样做意味着#container现在只是全宽，其中的文本居中。这不是我们想要的。 - thirtydot

Answer 2

一种方法是在您的 #page 元素周围创建一个包装器，让我们称之为 #wrapper：

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

这将允许#page div保持可变宽度。

- Nate B

---

在我看来，这里提供了最佳解决方案。 - Tunarock

Answer 3

这将为您提供一个动态大小的 div，它位于页面中心并且是适合内容所需的最小大小：

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

- Viruzzo

Answer 4

这个怎么样？

body {
  text-align: center;
}
#container {
  text-align: left;
}

假设代码是 `

`。

- PiTheNumber