CSS auto 在 margin:0 auto 中做什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3170772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does auto do in margin:0 auto?
提问by Jitendra Vyas
What does autodo in margin:0 auto;?
在auto做什么margin:0 auto;？
I can't seem to understand what autodoes. I know it sometimes has an effect of centering objects. Thanks.
我似乎无法理解是什么auto。我知道它有时会产生使物体居中的效果。谢谢。
回答by djdd87
When you have specified a widthon the object that you have applied margin: 0 autoto, the object will sit centrally within it's parent container.
当您width在应用的对象上指定了 a 后margin: 0 auto，该对象将位于其父容器的中央。
Specifying autoas the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.
指定auto为第二个参数基本上是告诉浏览器自己自动确定左右边距，它通过将它们设置为相等来做到这一点。它保证左右边距将设置为相同的大小。第一个参数 0 表示顶部和底部边距都将设置为 0。
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
Therefore, to give you an example, if the parent is 100px and the child is 50px, then the autoproperty will determine that there's 50px of free space to share between margin-leftand margin-right:
因此，举个例子，如果父级为 100px，子级为 50px，则该auto属性将确定在margin-left和之间共享 50px 的可用空间margin-right：
var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;
Which would give:
这会给：
margin-left:25;
margin-right:25;
Have a look at this jsFiddle. You do not have to specify the parent width, only the width of the child object.
看看这个jsFiddle。您不必指定父对象的宽度，只需指定子对象的宽度。
回答by shin
auto: The browser sets the margin. The result of this is dependant of the browser
auto：浏览器设置边距。这样做的结果取决于浏览器
margin:0 auto specifies
margin:0 自动指定
* top and bottom margins are 0
* right and left margins are auto
回答by Gumbo
From the CSS specification on Calculating widths and margins for Block-level, non-replaced elements in normal flow:
从 CSS 规范计算块级的宽度和边距，正常流中的非替换元素：
If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.
如果 'margin-left' 和 'margin-right' 都是 'auto'，则它们的使用值相等。这使元素相对于包含块的边缘水平居中。
回答by user3237573
margin:0 auto;
0is for top-bottom and autofor left-right. It means that left and right margin will take auto margin according to the width of the element and the width of the container.
0用于上下和auto左右。这意味着左右边距将根据元素的宽度和容器的宽度自动进行边距。
Generally if you want to put any element at center position then margin:autoworks perfectly. But it only works in block elements.
通常，如果您想将任何元素放在中心位置，那么margin:auto效果很好。但它只适用于块元素。
回答by jaffer sathick
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
0 is for top-bottom and auto for left-right. The browser sets the margin.
0 表示上下，auto 表示左右。浏览器设置边距。
回答by Angus Comber
It becomes clearer with some explanation of how the two values work.
通过对这两个值的工作原理的一些解释，它变得更加清晰。
The margin property is shorthand for:
margin 属性是以下的简写：
margin-top
margin-right
margin-bottom
margin-left
So how come only two values?
那么为什么只有两个值呢？
Well, you can express margin with four values like this:
好吧，您可以使用四个值来表示边距，如下所示：
margin: 10px, 20px, 15px, 5px;
which would mean 10px top, 20px right, 15px bottom, 5px left
这意味着顶部 10 像素，右侧 20 像素，底部 15 像素，左侧 5 像素
Likewise you can also express with two values like this:
同样，您也可以使用以下两个值来表示：
margin: 20px 10px;
This would give you a margin 20px top and bottom and 10px left and right.
这将为您提供上下 20 像素和左右 10 像素的边距。
And if you set:
如果你设置：
margin: 20px auto;
Then that means top and bottom margin of 20px and left and right margin of auto. And auto means that the left/right margin are automatically set based on the container. If your element is a block type element, meaning it is a box and takes up the entire width of the view, then auto sets the left and right margin the same and hence the element is centered.
那么这意味着 20px 的上下边距和 auto 的左右边距。auto 表示根据容器自动设置左右边距。如果您的元素是块类型元素，这意味着它是一个框并占据视图的整个宽度，则自动将左右边距设置为相同，因此元素居中。
回答by Danny
It is a broken/very hard to use replacement for the "center" tag. It comes in handy when you need broken tables and non-working centering for blocks and text.
“中心”标签的替代品已损坏/很难使用。当您需要损坏的表格以及块和文本的非工作居中时，它会派上用场。
