如何使用 CSS 轻松地将

水平居中？ [复制]

我正在尝试水平居中<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

如果是非固定宽度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