为什么包括宽度使边距：自动中心块级元素正确？

Question

如果我有一个块级元素，我在CSS中选择它并声明CSS规则margin: auto; 没有什么事情发生。 但当我包括width: 100px; 它突然变得居中在屏幕中间。 为什么包括width会发生这种情况？

Answer 1

它确实使div居中！ 如果您尝试将颜色添加到div中，您将看到div实际上填充了页面的整个宽度并且实际上居中（或者更好地说它们已经填满整个它们没有水平移动的位置）。

如果没有为它们定义宽度，则div会自动填充其父级的宽度。

如果你把'width：100px'放到它们上面就可以看出它实际上是居中的。

更新（hungerstar希望它更具技术性）：

您有一个宽度为500px的父容器，并且其中有一个子容器，您将其设置为margin 0 auto;

那个孩子居中，但这并不明显。 为什么？ 因为div会自动将其自身置于其父级内（div具有width: auto;默认情况下，如果不指定它），因此其宽度也为500px，并留有空间以使其在其父级中水平移动。

如果指定的宽度大于500px，那么它将溢出到其父容器的右侧，因为浏览器首先优先考虑左边距，但如果指定宽度为400px，则margin: 0 auto; 将启动并首先计算左边距(parent_width - this_child_width)/2 ，然后根据该等式分配剩余空间的右边距。

因此，我们有this_child_width = 500px和parent_width = 500px因此(500px-500px)/2 = 0 。 左右0边距=中心。

Answer 2

实际上它非常简单。 自动计算边距需要一个参考点。

等式看起来像这样：

container - width = total margin allowance

给定容器内的1000px容器和700px元素：

1000px - 700px = 300px for margins

如果您只有一个汽车保证金，则该保证金将为300px 。 如果你有两个边距，比如margin: 0 auto; 设置左右边距，左边距和右边距各150px ， 300px / 2 = 150px 。 在设定宽度块级元素的每一侧添加相同数量的边距是产生居中效果的原因。

现在尝试没有设定宽度的等式。

1000px - ?? = ?? for margins

单边是?? / 1 = 100% of ?? ?? / 1 = 100% of ?? 两个边缘是?? / 2 = 50% of ?? ?? / 2 = 50% of ?? 。

百分比宽度也可以正常工作，因为：

1000px - 50% = 500px或1000px - 500px = 500px （ 1000px - 500px = 500px 50％为500px）