您如何轻松地使用 CSS 将 <div> 水平居中？

我试图将<div>块元素在页面上水平居中，并将其设置为最小宽度。最简单的方法是什么？我希望<div>元素与页面的其余部分内联。我将尝试举一个例子：

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

css html

答案

对于非固定宽度的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的宽度是动态的 -> 它会增长和收缩以适应其中的文本。

您可以在 Caniuse上检查浏览器的兼容性

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

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>

margin: 0 auto;

如ck 所说，并非所有浏览器都支持min-width