margin: 0 auto水平居中必须满足三条件：元素为块级、父容器有明确宽度、子元素设明确width（不能是100%或auto）；否则无剩余空间可分，居中失效。
块级元素用 margin: 0 auto 居中必须设 width
它不是“加了就居中”，而是浏览器靠左右外边距均分剩余空间来实现的——没剩余空间，就无处可分。所以width是硬性前提，不能是100%、auto或没声明。
-
width可以是像素值（如width: 320px）、百分比（如width: 80%），但不能是width: 100%（撑满父容器，无剩余空间） - 元素必须是块级行为：默认
<div>、<p>没问题；<img>要先加display: block - 父容器不能是
display: flex或display: grid——这两种布局会静默覆盖margin: auto的计算逻辑 - 子元素不能有
float、position: absolute或position: fixed，否则脱离普通文档流，auto失效
text-align: center 对块级子元素完全无效
很多人给父容器加text-align: center，发现里面的<div>纹丝不动——这很正常，因为text-align只控制行内内容（文字、<img>、<span>）的对齐，不移动块级盒子本身。
- 适用场景：让段落文字居中、
<img>在父容器里水平居中（<img>默认是inline-block） - 失效条件：子元素是
display: block；父容器用了flex/grid；子元素加了float或position: absolute - 如果真想用
text-align间接影响块级元素，得先把它变成行内级：display: inline-block，再配合text-align: center在父容器上生效
现代项目优先用 display: flex + justify-content: center
它不依赖子元素宽高，也不挑类型，但会改变父容器的布局上下文——这是最常被忽略的副作用。
- 只需给父容器加
display: flex和justify-content: center，子元素无需任何样式 - 若子元素自身写了
width: 100%，它仍会撑满父容器，justify-content不起作用——这时要限制子元素宽度或用max-width -
float、vertical-align、margin: auto在 Flex 容器里全部失效，别混用 - IE10/11 对
justify-content支持有 bug，老项目慎用；需要兼容时，回退到margin: 0 auto更稳
绝对定位元素必须用 transform: translateX(-50%)
当元素已设position: absolute或fixed，又想水平居中时，别算像素值，也别用margin: auto——它在这种上下文里直接被忽略。
立即学习“前端免费学习笔记（深入）”；
- 写法固定三步：子元素加
position: absolute+left: 50%+transform: translateX(-50%) - 父容器必须有定位上下文：
position: relative（最常用）、absolute或fixed；否则left: 50%会相对于视口计算，滚动就偏移 - 比
left: calc(50% - 宽度/2)安全，因为不依赖预知宽度，响应式下更鲁棒 - 注意：这个方案会让元素脱离文档流，不影响其他元素布局，但也意味着它不再参与父容器的高度计算
实际写的时候，先看元素是否脱离文档流、有没有固定宽、父容器是什么布局模式——选错方案不会报错，但元素就是不动。真正卡住人的，往往不是语法写错，而是没意识到margin: 0 auto被flex静默覆盖，或者text-align根本就不管块级子元素。
