Центрирование div с неизвестной шириной

У меня есть div <div id="container"></div>, который содержит все содержимое страницы, включая нижний колонтитул и т.д.

Итак, я хотел бы центрировать этот div в центре моей страницы, теперь у меня есть этот css:

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

И это работает, но моя проблема заключается в том, что содержимое в этом div продолжает меняться, поэтому ширина тоже меняется, она может быть 1000px или 10100px, поэтому мне нужно что-то вроде width:auto;, как это можно сделать?

Ответ 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;
}

Ответ 2

Один из способов - создать обертку вокруг вашего элемента #page, назовите ее #wrapper:

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

Это позволит div #page оставаться переменной шириной.

Ответ 3

Это даст вам динамический размер div, который остается в центре тела и является самым маленьким размером, необходимым для соответствия содержимому:

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

Ответ 4

как насчет этого?

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

Предполагая <body><div id="container"></div></body>