如果我有一个块级元素，我在CSS中选择它并声明CSS规则margin: auto;，那么什么都不会发生。但是当我加入width: 100px;时，它会突然变成屏幕中间的中心位置。为什么包含width会导致这种情况发生？
答案 0 :(得分：2)
它确实将div放在中心位置！如果您尝试将颜色添加到div中，您将看到div实际上填充了页面的整个宽度并且实际上居中（或者更好地说它们已经填满了整个它们没有水平移动的位置）。 / p> 如果没有为它们定义宽度，
div会自动填充其父级的宽度。
如果你把'width：100px'放到它们那只是显而易见它实际上是居中的。
更新（hungerstar希望它更具技术性）：
您有一个宽度为500像素的父容器，并且其中包含您已设置样式margin 0 auto;
那个孩子居中，但这并不明显。为什么？因为div会自动将其自身置于其父级内部（如果您未指定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边距=中心。
答案 1 :(得分：1)
实际上这很简单。自动计算边距需要一个参考点。
这个等式看起来像这样：
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 ??，两个边距为?? / 2 = 50% of ??。
百分比宽度也可以正常工作，因为：
1000px - 50% = 500px或1000px - 500px = 500px（1000px的50％为500px）