margin: 0 auto 最稳妥但需满足三条件：块级、有明确宽度、在普通文档流中；常见“失效”因无剩余空间或脱离流；flex/position 等方案各有前提与限制，须先判断布局上下文再选解法。
margin: 0 auto 是最稳妥的方案，但必须同时满足三个条件：元素是块级、有明确宽度（不能是 100% 或未声明）、处于普通文档流中。
为什么 margin: 0 auto 常常“没反应”
这不是 bug，而是浏览器按规范执行的结果。它依赖浏览器自动均分左右外边距，前提是存在“可分配的剩余空间”。
- 没设
width—— 元素默认占满父容器，左右无剩余空间，auto计算结果为0 - 元素是
display: inline（如<span></span>）—— 不支持margin: auto，得先加display: block - 父容器是
display: flex或display: grid—— 这两种布局会静默覆盖margin: auto行为 - 子元素自己用了
float或position: absolute—— 脱离文档流后，auto失效
display: flex + justify-content: center 的实际代价
它确实一行代码就能让任意子元素水平居中，但改变的是父容器的整个布局上下文。
- 所有直系子元素自动变成 Flex 项目，
float、vertical-align、甚至部分margin会被忽略 - 若子元素本身是
width: 100%，它仍会撑满父容器，justify-content对它无效 - IE10/11 对
justify-content有渲染 bug，比如在 flex 容器内嵌套块级元素时错位 - 想垂直+水平居中？父容器必须有明确高度（如
height: 100vh），否则align-items: center可能不生效
position: absolute + transform: translateX(-50%) 的关键前提
这方法不依赖宽高，适合模态框、加载遮罩等脱离文档流场景，但极易因定位上下文缺失而失效。
- 子元素必须设
position: absolute、left: 50%，再加transform: translateX(-50%) - 父容器必须有
position: relative（或absolute/fixed），否则left: 50%会相对于视口计算，页面一滚动就偏移 - 别用
margin-left: -100px替代transform—— 宽度未知或响应式时会出错 - 该方式对屏幕阅读器和键盘导航支持较弱，需额外加
aria-hidden或inert控制可访问性
真正容易被忽略的点是：三种方法不是并列选项，而是互斥前提下的解法。看到一个居中需求，第一件事不是写代码，而是看它在 DOM 中的 display 类型、是否已脱离文档流、父容器当前是什么布局模式——选错前提，写再多样式也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
