margin: 0 auto 水平居中失效主因有三：子元素未设宽度、脱离文档流（如float/absolute/inline）、父容器为flex或grid布局；flex居中需父容器设display: flex、justify-content和align-items及明确高度；绝对定位居中需父relative、子absolute+top/left50%+transform(-50%,-50%)；text-align仅对内联内容有效，不能直接居中块级div。
margin: 0 auto 水平居中为什么没反应
写了 margin: 0 auto 却纹丝不动，大概率是漏了三件事：
• 子 div 没设 width（比如 width: 300px 或 width: fit-content）
• 子 div 被设了 float、position: absolute 或 display: inline，脱离文档流
• 父容器用了 display: flex 或 display: grid，直接覆盖了 margin: auto 的行为
注意：width: 100% 不行——没有剩余空间可分，左右外边距都是 0
flex 布局让 div 完全居中（水平+垂直）
这是目前最可靠、写法最简的方案，但必须满足两个硬条件：
• 父容器加 display: flex、justify-content: center（水平）、align-items: center（垂直）
• 父容器要有明确高度，比如 height: 100vh 或固定像素值
常见坑：
• 忘记给父容器设高度，导致 align-items 失效（子元素“居中了”，但父容器塌缩成 0 高，看不见）
• 在子 div 上又加 margin: auto，和 flex 居中逻辑冲突，反而错位
示例代码：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"><br> <div style="width: 200px; height: 100px; background: #eee;"></div><br></div>
绝对定位 + transform 实现脱离文档流的居中
适合模态框、提示层这类需要盖在页面上方、不占布局空间的场景：
• 父容器必须设 position: relative（提供定位上下文）
• 子 div 设 position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%)
关键点：
• transform 是核心——它把元素自身宽高的一半“挪回去”，不依赖具体尺寸
• 不用管子元素有没有 width 或 height，哪怕内容动态变化也稳
• 滚动时不会偏移（前提是父容器有 position: relative）
text-align: center 不是用来居中 div 自身的
很多人误以为给父 div 加 text-align: center 就能让子 div 居中，其实不是：
• text-align 只控制**内联内容**（文字、img、span）在当前容器内的水平对齐
• 如果子 div 是块级且没设 width，它默认撑满父容器，看起来“没动”
• 如果你真想用这个方式，得先把子 div 改成 display: inline-block，再配 text-align: center 在父容器上
一句话：想居中块级元素本身，别碰 text-align，它不管用
立即学习“前端免费学习笔记（深入）”；
