margin: 0 auto 中的 auto 代表什么含义？

auto在 margin: 0 auto;中做了什么？

我似乎不能理解 auto是做什么的，我知道它有时候会使物体居中。

199978 次浏览
小开
最佳答案

当您在应用 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之间有50px 的可共享空间:

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

也就是说:

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

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

小开

Auto: 浏览器设置页边距，结果取决于浏览器

边距: 0自动指定

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

根据 计算正常流中块级、未替换元素的宽度和边距上的 CSS 规范:

如果“左边距”和“右边距”都是“自动”，那么它们的使用值是相等的。这将使元素相对于包含块的边缘水平居中。

小开 
margin:0 auto;

0代表上下，auto代表左右。这意味着左边距和右边距将根据元素的宽度和容器的宽度自动调整边距。

一般来说，如果你想把任何元素在中心的位置，然后 margin:auto工程完美。但它只能在块元素中工作。

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

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

小开

这是一个坏的/很难使用替换的“中心”标记。当你需要破碎的表格和非工作区块和文本的中心时，它就派上用场了。

小开

随着对这两种价值观如何运作的一些解释，它变得更加清晰。

保证金属性的简称是:

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

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

你可以用这样的四个值来表示边距:

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

这意味着顶部10px，右边20px，底部15px，左边5px

同样，您也可以像下面这样用两个值来表示:

margin: 20px 10px;

这将给你一个20像素的上部和底部和10像素的左右边距。

如果你设置:

margin: 20px auto;

这意味着上下边距为20px，左右边距为自动。Auto 意味着根据容器自动设置左/右边距。如果您的元素是块类型的元素，这意味着它是一个框，占据了视图的整个宽度，那么自动设置左右边距相同，因此元素是居中的。

小开

进入 auto

margin: 0 auto;

告诉浏览器自动设置元素的 margin-left和 margin-right属性，浏览器通过给这两个边距赋予相同的值来实现。

需要注意的一些重要事项是:

  1. 它只能用于具有指定宽度的 街区一级元素:

    一。如果未指定宽度，则左右边距将设置为0，因为块级元素占用容器的整个 width。 enter image description here

    对于 inline或 inline-block元素，没有可用于设置边距的水平空间，因为在此之前和之后还存在其他内联元素。 enter image description here

  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>


提交答案