"margin: 0 auto"中的"auto"是什么意思？

Question

margin: 0 auto; 中的 auto 是什么作用？

我似乎无法理解 auto 的作用。我知道它有时会使对象居中。

- Jitendra Vyas

Answer 1

当你在应用了 margin: 0 auto 样式的对象上指定了一个 width 属性时，该对象将在其父容器中居中显示。

将第二个参数设置为 auto 基本上是告诉浏览器自动确定左右边距，它通过将它们设置相等来实现。这确保了左右边距将被设置为相同的大小。第一个参数 0 表示顶部和底部边距都将被设置为 0。

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

因此，为了给您举一个例子，如果父元素宽度为100像素而子元素宽度为50像素，那么auto属性将决定有50像素的可用空间被分配到margin-left和margin-right之间：

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

这将会给出：

margin-left: 25;
margin-right: 25;

看一下这个jsFiddle。你不需要指定父元素的宽度，只需要指定子元素对象的宽度。

- djdd87

---

但是我们从未为body定义任何宽度，而且我们总是为#wrapper提供width和margin:0 auto。 - Jitendra Vyas

好的，那么页面主体和对象之间的边距将由浏览器自动计算。 - Jitendra Vyas

在百分比符号中是否有类似的值？我的意思是，在CSS中是否有其他属性可以像左和右的“auto”一样给出相同的结果。 - Jitendra Vyas

@GenericTypeTea - 在 margin:auto 0 的情况下会发生什么？ - Jitendra Vyas

然而，为什么当我使用margin: 20 auto时，它似乎会影响左右定位？看起来我所做的只是添加了上/下边距... - pitosalas

在这种情况下，为什么margin:auto 0;与垂直高度不起作用？ - Kathir

Answer 2

自动（auto）：浏览器会设置外边距，其结果取决于浏览器。

margin:0 auto 表示

* top and bottom margins are 0
* right and left margins are auto

- shin

Answer 3

根据CSS规范中的“计算普通流中块级非替换元素的宽度和边距”：

如果'margin-left'和'margin-right'都是“auto”，则它们的使用值相等。这会使元素在包含块的边缘水平居中。

- Gumbo

---

“他们使用的值相等”这句话是什么意思？ - Jitendra Vyas

如果父元素的宽度（由浏览器或指定的宽度确定）为100像素，而您的子元素div的宽度为50像素，则margin:0 auto将确定有50像素的可用空间。然后它会将其除以2，得到25。左右边距都将设置为25，即值相等。 - djdd87

使用的值是指根据使用此属性的元素的实际可视属性和其包含块来确定的实际使用值。链接的部分提供了一个公式，用于计算元素与其包含块之间的水平差异。然后将这个差异平均分割，并用作实际的水平边距值。 - Gumbo

Answer 4

margin:0 auto;

0表示上下方向使用零边距，auto表示左右方向使用自动边距。这意味着，左右边距将根据元素和容器的宽度采用自动边距。

通常情况下，如果您想将任何元素放置在中心位置，则margin:auto非常有效。但它仅适用于块级元素。

- user3237573

Answer 5

通过一些解释，可以更清晰地理解这两个值是如何起作用的。

margin属性是以下属性的简写形式：

margin-top
margin-right
margin-bottom
margin-left

那么为什么只有两个值呢？

好的，你可以用四个值来表示margin，像这样：

margin: 10px, 20px, 15px, 5px;

这意味着上方有10像素，右侧有20像素，下方有15像素，左侧有5像素。

同样地，您也可以用两个值来表示，如下所示：

margin: 20px 10px;

这将在上下各留出20像素的边距，在左右各留出10像素。

如果您设置：

margin: 20px auto;

那意味着上下外边距为20px，左右外边距为自动调整。而自动调整意味着左/右外边距会根据容器自动设置。如果你的元素是块级元素，也就是说它是一个盒子并占据了整个视图的宽度，则“auto”会将左右外边距设置为相同的值，因此该元素居中。

- Angus Comber

Answer 6

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0代表上下方向无边距，auto代表左右方向无边距。 浏览器会设置边距。

- jaffer sathick

Answer 7

The auto in

margin: 0 auto;

将margin-left和margin-right属性设置为自动。浏览器通过给这两个边距设置相同的值来实现这一点。

需要注意的一些重要事项：

1. 它只能用于指定了宽度的块级元素：

   a. 如果没有指定宽度，左右边距将设置为0，因为块级元素占据整个容器的width。

   b. 对于inline或inline-block元素，没有可用的水平空间来设置边距，因为前后存在其他内联元素。

2. auto仅适用于水平居中，因此使用margin:auto 0;将不会使元素在垂直方向上居中。来源

.card {
  width: 400px;
  height: 100px;
  background-color: yellow;
}

.box {
  width: 30px;
  height: 20px;
  background-color: red;
  margin: 0 auto;
  /* margin: auto 0; */
  /* display: inline-block; */
}

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

- codesnerd

Answer 8

margin: 0 auto 

这是一个CSS属性，它将元素的上下边距设置为0，并在其父元素中水平居中。

这种技术经常用于居中块级元素，如div或图像。

- Vidhi Kapadia

Answer 9

它是“center”标签的一个损坏/非常难以使用的替代品。当您需要破碎的表格和无法工作的块和文本居中时，它非常有用。

- Danny