auto在margin：0 auto中做什么？

126

在auto做什么margin:0 auto;？

我似乎无法理解是什么auto。我知道有时有时会使对象居中。谢谢。

css

— Jitendra Vyas
source

189

在要width应用的对象上指定a 时margin: 0 auto，该对象将位于其父容器的中央。

指定auto为第二个参数基本上会告诉浏览器自动确定左右边距本身，方法是将它们均等设置。它保证左右边距将设置为相同的大小。第一个参数0表示顶部和底部边距都将设置为0。

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

因此，给你一个例子，如果家长100px的和孩子是50像素，那么auto属性将确定有之间的自由空间，以每股50像素margin-left和margin-right：

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

这将给：

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

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

— dd
source

但我们从来没有定义任何宽度body，我们总是给width和margin:0 auto以#wrapper

— Jitendra Vyas的

好的，然后浏览器会自动计算物体和物体之间的余量。

— Jitendra Vyas

有没有类似的价值%？我的意思是css中还有其他任何属性都可以像左，右得到相同的结果auto

— Jitendra Vyas 2010年

@GenericTypeTea- margin:auto 0情况如何？

— Jitendra Vyas

但是，为什么在使用margin：20 auto时似乎会左右定位呢？看来我所做的只是添加顶部/底部边距...

— pitosalas

13

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

margin：0自动指定

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

— 胫
source

9

从CSS规范中计算正常流程中块级不可替换元素的宽度和边距：

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

— 秋葵
source

“它们使用的值相等”是什么意思？

— Jitendra Vyas

3

@ metal-gear-solid-如果父级的宽度（通过浏览器或指定的宽度确定）为100px，而子级div的宽度为50px。然后margin：0 auto将确定有50px的可用空间。然后将其除以2，得到25。然后将左右边距都设置为25，即，将值均等设置。

— djdd87'7

1

使用的值是指实际使用的值，具体取决于使用此属性的元素及其包含的块的实际视觉属性。链接的部分具有一个公式，该公式用于计算元素与其包含的块之间的水平差。然后将该差异均等化，并用作实际水平边距值。

— 浓汤

6

margin:0 auto;

0用于上下和auto左右。这意味着左边界和右边界将根据元素的宽度和容器的宽度采用自动边界。

通常，如果您想将任何元素放在中心位置，则margin:auto可以完美地工作。但这仅适用于块元素。

— 用户名
source

1

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

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

— 杰弗·萨希克
source

1

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

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表示根据容器自动设置左右边距。如果您的元素是块类型元素，则意味着它是一个盒子并且占据了视图的整个宽度，然后自动将左右边距设置为相同，从而使元素居中。

— 安格斯·康伯
source

-3

替换“中心”标签非常麻烦/很难。当您需要残破的表格并且无法正常使用块和文本的居中功能时，它非常有用。

— 丹尼
source