CSS margin: 0 auto中的auto属性是如何工作的

“margin: 0 auto”属性是一种常用的CSS属性，允许开发人员在容器中水平居中元素。margin属性中的“auto”值使得居中成为可能。

在本文中，我们将探讨margin属性中的“auto”值如何工作，以及如何使用它实现水平居中。我们还将讨论在使用margin属性中的“auto”值时可能遇到的一些错误和最佳实践。

CSS中的边距

在继续下一个主题之前，我们将尝试学习一些基础知识，以便理解问题。首先，我们将了解CSS中的边距是什么，然后我们将继续了解“auto属性”。只有在学习了所有这些内容之后，我们才能给出我们原始问题的答案。

我们知道CSS用于样式化网页，使其易于使用和视觉上令人愉悦，以便用户的整体体验更加流畅和良好。这种样式包括许多内容，如颜色、字体、字体大小等。其中一种样式化方法是使用适当的元素间距。
当我们谈论的是元素定义边框之外的空间时，实际上是在谈论其边距。边距让我们可以创建一个无形的边框，将一个元素与另一个元素分隔开。它有点像内边距，但内边距实际上是元素的子元素与其周围元素之间的空间。
CSS允许我们高度控制和自定义元素的边距，我们可以使用margin来创建四个边都相等的边距，但我们也可以单独定义特定边的边距，通过指定我们实际上要引用的边距。例如，

margin : 0 // statement 1
margin top : 25px // statement 2

通过语句1设置的边距将在元素的所有边缘上设置边距为0，而通过语句2设置的边距将仅修改顶部边距并将其设置为25像素。

我们可以使用不同的方式指定边距 –

我们可以使用自定义长度。
我们可以指定一个百分比值，它将根据用户的屏幕尺寸而改变。
我们还可以使边距可继承，将当前元素的边距设置为其父元素的边距。

但是，如果我们不知道在定义边距时应使用什么值，该怎么办。

auto属性

CSS提供了一个属性，可以让浏览器计算并设置该元素的边距，而该属性就是自动属性。这个属性使开发人员更容易使用边距，因为我们不需要预先知道我们将使用的实际值，而是让浏览器来计算。

首先让我们了解它是如何工作的。如果我们将元素的边距指定为自动，则首先通过计算元素的宽度和大小来给出所有边的相等边距。

示例

让我们考虑一个尺寸为500像素乘300像素的div。如果我们不指定任何边距，它将自动对齐到屏幕的左上角。另一方面，指定边距为自动会使其居中到其父容器，这种情况下是body标签。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Margin: 0 auto example</title>
</head>
<body style="background-color: coral; margin: 0; padding: 0; font-size: larger;
font-weight: bold;">
   <div style="width: 500px; height: 300px; border: 1px solid black; background-color: aqua;">No set margin</div>
   <div style="width: 500px; height: 300px; border: 1px solid black; background-color: burlywood; margin: auto;">Margin set to 0</div>
</body>
</html>

使用 margin: 0 auto

现在，如果我们尝试使用两个值来使用 margin，会发生什么呢。当我们尝试使用 margin 并为其提供两个值时，第一个值被视为上下边距的值，而第二个值用于左右边距。

我们的问题是解释，“如果我们将 auto 属性用作 margin 的第二个值，它将如何工作”。

答案是， “它将通过自动计算左右边距，将元素垂直居中到其父元素。”

示例

考虑与上述示例相同，但将 margin 设置为 0 auto。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Margin: 0 auto example</title>
</head>
<body style="background-color: coral; margin: 0; padding: 0; font-size: larger; font-weight: bold;">
   <div style="width: 500px; height: 300px; border: 1px solid black; background-color: burlywood; margin: 0 auto;">Margin set to 0 auto</div>
</body>
</html>