css - 如何使用 CSS 轻松地将 水平居中？

Question

这个问题在这里已经有了答案:

How can I horizontally center an element? (131 个回答)

关闭 4年前。

我正在尝试将 <div> 水平居中页面上的 block 元素并将其设置为最小宽度。最简单的方法是什么？我想要 <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

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 的宽度是动态的 -> 它会随着其中的文本而增长和缩小。

您可以在 Caniuse 上查看浏览器兼容性。