auto 在 margin: 0 auto 中做了什么？答案

【问题标题】：What does auto do in margin: 0 auto?auto 在 margin: 0 auto 中做了什么？
【发布时间】：2011-03-11 09:22:25
【问题描述】：

auto 在margin: 0 auto; 中有什么作用？

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

【问题讨论】：

【解决方案1】：

当您在已应用margin: 0 auto 的对象上指定width 时，该对象将位于其父容器的中心。

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

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

因此，举一个示例，如果父级为 100px，子级为 50px，则auto 属性将确定margin-left 和margin-right:

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

这会给：

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

看看这个jsFiddle。您不必指定父对象的宽度，只需指定子对象的宽度即可。

【讨论】：

【解决方案2】：

auto：浏览器设置边距。其结果取决于浏览器

margin:0 自动指定

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

【讨论】：

【解决方案3】：

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

【讨论】：

"它们使用的值相等"这是什么意思？
@metal-gear-solid - 如果父级的宽度（由浏览器或指定的宽度确定）为 100px，而您的子 div 的宽度为 50px。然后 margin:0 auto 将确定有 50px 的可用空间。然后它将除以 2，得到 25。然后，左右边距都设置为 25，即值设置相同。
使用值是指实际使用的值，具体取决于使用该属性的元素及其包含块的实际视觉属性。链接部分有一个公式，用于计算元素与其包含块之间的水平差。然后，该差异被平均分配并用作实际的水平边距值。

【解决方案4】：

margin:0 auto;

0 用于上下，auto 用于左右。就是说左右边距会根据元素的宽度和容器的宽度取自动边距。

通常，如果您想将任何元素放在中心位置，那么margin:auto 可以完美运行。但它只适用于块元素。

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

“中心”标签的替代品已损坏/非常难以使用。当您需要损坏的表格以及块和文本的非工作居中时，它会派上用场。

【讨论】：

【解决方案7】：

通过对这两个值如何工作的一些解释，它变得更加清晰。

margin 属性是以下的简写：

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

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

好吧，你可以像这样用四个值来表示边距：

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

这意味着顶部 10 像素，右侧 20 像素，底部 15 像素，左侧 5 像素

同样你也可以用这样的两个值来表达：

margin: 20px 10px;

这将为您提供上下 20px 和左右 10px 的边距。

如果你设置：

margin: 20px auto;

那就意味着上下边距为 20px，左右边距为 auto。而 auto 表示根据容器自动设置左右边距。如果您的元素是块类型元素，即它是一个盒子并且占据了视图的整个宽度，那么 auto 会将左右边距设置为相同，因此元素居中。

【讨论】：