margin: auto 仅对有明确宽度的块级元素在传统文档流中水平居中有效；在 flex/grid 布局、inline-block 或无宽块元素中失效，垂直方向对普通块级元素无效。
margin: auto 为什么有时不居中？
它只对「有明确宽度」的块级元素生效，且父容器不能是 display: flex 或 display: grid 这类新布局——否则会直接被忽略。
- 常见错误现象：
margin: 0 auto写了但元素贴左，大概率是没设width，或父元素用了flex - 使用场景：传统文档流中的卡片、登录框、固定宽容器等需要水平居中的块
- 注意
margin: auto在垂直方向上对普通块级元素无效（height不起作用），别指望它让 div 垂直居中
inline-block 元素用 margin: auto 会失效
因为 margin: auto 对非块级盒（如 display: inline、inline-block）不计算自动值，浏览器直接当 0 处理。
- 解决办法：要么改成
display: block+width，要么用父容器text-align: center配合子元素display: inline-block - 参数差异：
text-align: center只影响行内内容，不影响块级子元素的 margin；而margin: auto是盒模型自身的计算行为 - 兼容性影响：后者在 IE8+ 完全可靠，前者在老 IE 中对
inline-block支持弱（需加zoom: 1; *display: inline;）
flex 布局下 margin: auto 的隐藏能力
在 display: flex 容器里，margin: auto 突然“复活”，不仅能水平居中，还能垂直居中，甚至能推走相邻元素。
- 常见错误现象：给 flex 子项写
margin: auto后整个布局错位，其实是它在吸走剩余空间，把其他子项挤到一端 - 使用场景：单个按钮在 flex 容器中绝对居中、侧边栏固定 + 主内容自适应时用
margin-left: auto推开 - 性能影响：无额外开销，是 flex 布局原生支持的行为，比 JS 计算位置更轻量
table-cell 和 absolute 定位下的替代方案
当 margin: auto 被限制（比如父元素高度未知又必须垂直居中），就得换思路——不是所有居中都靠它。
立即学习“前端免费学习笔记（深入）”；
-
display: table-cell+vertical-align: middle：适合内容高度不定但父容器有固定高，兼容 IE8，但语义失真 -
position: absolute+top: 50%; left: 50%; transform: translate(-50%, -50%)：最通用，但依赖已知宽高或使用transform回退（IE9+） - 容易被忽略的点：用
transform居中时，如果子元素有margin，它是在 transform 前计算的，视觉偏移可能比预期多出几个像素
