如何轻松地使用CSS水平对<div>进行居中？

Question

如何轻松地使用CSS水平对<div>进行居中？我正试着把一个<div>块元素，并将其设置为最小宽度。做这件事最简单的方法是什么？我想要<div>元素与页的其余部分保持内联。我想举个例子：page text page text page text page textpage text page text page text page text               -------               | div |               -------page text page text page text page textpage text page text page text page text

Answer 1

如属非固定宽度div(即您不知道div将占用多少空间)。

#wrapper {

  background-color: green; /* for visualization purposes */

  text-align: center;

}

#yourdiv {

  background-color: red; /* for visualization purposes */

  display: inline-block;

}

<div id="wrapper">    

    <div id="yourdiv">Your text</div>

</div>

请记住#yourdiv是动态的->它将增长和缩小，以适应其中的文本。

您可以检查浏览器的兼容性。卡尼乌斯

Answer 2

在大多数浏览器中，这将起作用：

div.centre {

  width: 200px;

  display: block;

  background-color: #eee;

  margin-left: auto;

  margin-right: auto;

}

<div class="centre">Some Text</div>

在IE6中，您需要添加另一个外部div:

div.layout {

  text-align: center;

}

div.centre {

  text-align: left;

  width: 200px;

  background-color: #eee;

  display: block;

  margin-left: auto;

  margin-right: auto;

}

<div class="layout">

  <div class="centre">Some Text</div>

</div>

Answer 3

margin: 0 auto;

如洛克说过, 最小宽度并不是所有浏览器都支持。