HTML margin: 0 auto的自动属性是如何工作的

margin: 0 auto属性是一个常用的CSS属性，它允许开发者将元素在其容器中水平居中。margin属性的 “auto “值可以使这种居中操作发生。

在这篇文章中，我们将研究 ” auto “值在margin属性中的作用，以及如何使用它来实现水平居中。我们还将讨论在margin属性中使用 ” auto”值时的一些潜在错误和最佳做法。

CSS中的页边距

在进入主题之前，我们将尝试学习我们所需要的基础知识，以便理解这个问题。首先，我们将学习margin在CSS中的含义，然后，我们将转到理解 auto属性。只有在了解了这些之后，我们才能够得出我们最初问题的答案。

我们知道，CSS的作用是对网页进行造型设计，使其易于使用并具有视觉效果，从而使用户的整体用户体验更加顺畅和美好。这种样式设计包括很多东西，如颜色、字体、字体大小等等。其中一个造型方法是使用元素之间的适当间距。
每当我们在谈论一个元素的定义边界之外的空间时，我们实际上是在谈论它的边距。边距让我们创建一个无形的边界，将一个元素与另一个元素隔离开来。它有点像padding，但padding实际上是一个元素的子元素和其周围元素之间的空间。
我们可以使用margin来创建一个四边相等的边距，但我们也可以通过指定哪个边距来单独定义某个特定边的边距。比如说。

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

语句1设置的margin将为元素的所有边设置0的margin，而语句2设置的margin将只修改顶部的margin，将其设置为25像素。

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

我们可以使用自定义长度。
我们可以指定一个百分比值，它将根据用户的屏幕尺寸而改变。
我们也可以使margin可继承，这将使当前元素的margin等于其父元素的margin。

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

auto属性

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

让我们先了解一下它是如何工作的。如果我们指定一个元素的边距为自动。它通过首先计算元素的宽度和大小，给所有的边都留有相等的余地。

例子

让我们考虑，一个尺寸为500像素×300像素的div。如果我们不指定任何边距，它就会将自己对准屏幕的左上角。另一方面，指定margin为auto将使它与它的父容器（本例中为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>