margin: 0 auto水平居中必须同时满足三条件：元素为块级（如display: block）、有明确宽度（非auto或100%）、未脱离文档流（无float/absolute/fixed）；缺一即失效，且在flex/grid容器中不适用。
块级元素用 margin: 0 auto 最稳定
只要满足三个硬性条件，margin: 0 auto 就是目前兼容性最好、行为最可预测的方案，从 IE6 到现代浏览器都按规范渲染，不依赖 JS、不改变文档流、不干扰兄弟元素布局。
常见错误现象：写了 margin: 0 auto 却没反应——大概率是漏了下面任一条件：
-
display必须是block、table或其他能接受 width 的块格式上下文（不能是inline或flex） -
width必须是明确值（如300px、50%），不能是auto或100%（后者虽有宽度，但左右无剩余空间可分配） - 不能脱离普通文档流：去掉
float、position: absolute或position: fixed
示例中常被忽略的一点：<img> 默认是 inline 元素，直接加 margin: 0 auto 无效，得先加 display: block。
父容器是 flex 时 margin: auto 失效
很多人在 flex 容器里给子元素写 margin: 0 auto，发现完全不居中——这不是 bug，是规范行为。Flex 项目（即直系子元素）的 margin 不参与主轴对齐计算，auto 值会被忽略或转为 0。
此时正确做法是放弃子元素样式，改用父容器控制：
- 水平居中：加
justify-content: center - 如果还想要垂直居中：再加
align-items: center - 注意：IE10–11 对
justify-content有渲染 bug，比如内容偏左或抖动，老项目慎用
别试图在 flex 容器里“混用” margin: auto 和 justify-content，它们逻辑冲突，结果不可控。
绝对定位元素必须用 transform: translateX(-50%)
当元素已设 position: absolute 或 fixed，margin: 0 auto 直接失效。这时唯一可靠且无需知道宽高的方式是：
- 父容器加
position: relative（提供定位上下文） - 子元素写
left: 50%+transform: translateX(-50%) - 不能只写
left: 50%：那只是把左边缘移到中心，元素整体右偏 - 避免用
margin-left: -150px：宽度一变就得手动改，维护成本高
这个组合在 IE9+、所有现代浏览器都稳定，但要注意旧版 Safari 可能需要 -webkit-transform 前缀。
多块级元素并排居中该用 inline-block + text-align
想让多个定宽 div（比如三列卡片）一起水平居中，又不想用 flex？传统方案是靠行内格式化上下文（IFC）：
- 父容器设
text-align: center - 每个子元素设
display: inline-block - 子元素之间不能有换行符或空格，否则会渲染成空白间隙；或用 HTML 注释消除间隙
这种方法兼容到 IE7，但缺点明显：子元素高度不一致时基线对齐混乱，且无法控制间距（letter-spacing 影响不可靠）。真要长期维护，建议还是上 flex 或 grid。
真正容易被忽略的是：一旦你给父容器加了 display: flex 或 display: grid，text-align: center 就彻底失效——它只在块格式化上下文（BFC）里起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
