CSS margin: 0 auto 中的 auto 是什么意思

在本文中，我们将介绍 CSS 中 margin: 0 auto 中的 auto 的含义和作用。首先，让我们先了解下 margin 和 auto 的基本概念。

阅读更多：CSS 教程

margin

在 CSS 中，margin 表示元素周围的间距。它可以控制元素与其他元素之间的距离，同时还可以为元素提供边框外的空白区域。margin 可以在四个方向上进行设置：上、下、左和右。例如，如果我们希望在一个 div 元素的上方有 10px 的空白区域，可以使用 margin-top: 10px。

auto

auto 是 CSS 中的一个关键字，用来表示“自动”。当应用于 margin 属性时，auto 的作用是让元素在水平方向上自动居中。简单来说，margin: 0 auto 可以实现一个元素在水平方向上居中显示的效果。

接下来，我们将通过示例来进一步说明 margin: 0 auto 的作用。

假设我们有一个 div 元素，其宽度为 300px，高度为 200px，代码如下所示：

<div class="box"></div>

我们希望这个 div 元素在浏览器中水平居中显示，可以使用以下 CSS 代码实现：

.box {
  width: 300px;
  height: 200px;
  margin: 0 auto;
}

上述代码中的 margin: 0 auto 表示让元素的左右边距都为 0，同时在水平方向上自动居中。这样，无论浏览器的宽度如何变化，这个 div 元素都会始终水平居中显示。

总结

通过本文的介绍，我们了解了 CSS 中 margin: 0 auto 的含义和作用。auto 是 CSS 中的一个关键字，可以让元素在水平方向上自动居中。在实际应用中，我们经常使用 margin: 0 auto 来实现元素的水平居中显示。希望本文对你理解和应用 CSS 的自动居中有所帮助。