答案：margin: auto 通过将剩余空间均分给左右外边距实现水平居中，适用于设置明确宽度的块级元素，其核心是浏览器自动计算并分配可用空间，使元素在父容器中居中对齐。
当设置 margin: auto 时，浏览器会自动计算外边距的值，以实现元素在父容器中的居中对齐。这种机制主要适用于设置了明确宽度的块级元素。
盒模型中的空间分配逻辑
一个元素占据的总宽度由以下部分组成：
- 内容宽度（width）
- 左右内边距（padding-left + padding-right）
- 左右边框（border-left + border-right）
- 左右外边距（margin-left + margin-right）
当这些部分加起来小于其包含块（通常是父容器）的可用宽度时，就会产生“剩余空间”。margin: auto 的作用就是让浏览器将这部分剩余空间合理分配给左右外边距。
auto 值的计算规则
CSS 规范规定：如果包含块的宽度已知，且元素的 width、margin-left、margin-right 中有两个为 auto，浏览器会优先确定 width（通常根据内容或默认行为），然后把剩余空间按需分配。
立即学习“前端免费学习笔记（深入）”；
最常见的情况是：
- width 设为固定值（如 500px）
- margin-left 和 margin-right 都设为 auto
此时浏览器会将剩余空间平分给左右外边距，从而实现水平居中。
实现水平居中的典型写法
要使一个块级元素在父容器中水平居中，标准做法是：
.center {
width: 300px;
margin: 0 auto; /* 上下0，左右auto */
}
这表示上下外边距为0，左右外边距由浏览器自动计算。由于左右 margin 都是 auto，它们获得相等的值，元素因此居中。
限制与注意事项
该方法只对块级元素有效，且要求元素有明确的宽度。如果 width 是 auto（即未设置），浏览器会尽可能拉伸元素，此时左右 margin:auto 通常会被视为0，无法居中。
对于行内元素或行内块元素，应使用 text-align: center 在父元素上控制居中。
基本上就这些。margin:auto 的居中机制依赖于可用空间的自动分配，核心是“左右均分剩余空间”，理解这一点就能灵活运用在布局中。不复杂但容易忽略细节。
