如果我有一个块级元素，并且在CSS中选择它并声明CSS Rule margin: auto;，则什么都没有发生。但是，当我包含width: 100px;时，它突然变得中间位于屏幕中间。为什么包括 width将发生这种情况？
它实际上确实是DIV的中心！如果您尝试向Div涂上颜色，您会发现DIV实际上填满了页面的全部宽度，并且实际上是居中的（或者更好地说他们已经填充了整体，他们没有水平移动的地方）。/p>
divs如果您不为其定义宽度，则会自动填充父母的宽度。
如果将"宽度：100px"放在他们身上，这很明显它实际上是中心的。
更新（Hunderstar希望它更具技术性）：
您有一个带有500px宽度的父装容器，其中有一个 margin 0 auto;
那个孩子是集中的，但这并不明显。为什么？因为该div自动适合其父母内部（如果未指定，则divs的 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左右=中心=中心。
实际上很简单。自动计算边缘需要一个参考点。
等式看起来像这样：
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）