text-align: center 必须作用于父容器才有效，仅影响行内级子元素；margin: 0 auto 需块级、定宽、非flex/grid父容器；flex居中需同时设justify-content和align-items并指定父高；绝对定位+transform适用于未知尺寸元素。
text-align: center 只对父容器生效，且只影响行内内容
给 <img> 或 <p> 自己加 text-align: center 没用——它必须写在**父容器**上。浏览器看到的是：父容器说“我里面的内容请居中”，而子元素是否响应，取决于它是不是行内级（如文字、<img> 默认就是）。
常见错误现象：<div><img src="a.jpg"></div> 中只给 <img> 加 text-align: center，浏览器直接忽略；或者父容器用了 display: flex 或 display: grid，text-align 就被完全覆盖。
- 适用场景：段落里混排文字和图片，想整体水平居中
- 正确写法：
<p style="text-align: center"><img src="a.jpg"> 这段文字也会居中</p> - 注意：
<div>类块级子元素不会被text-align影响；若要让它也居中，得加display: inline-block
margin: 0 auto 要求块级 + 定宽 + 非 flex/grid 父容器
margin: 0 auto 不是“让元素居中”，而是“让左右 margin 平分剩余空间”。漏掉任一前提都会失效。
常见错误现象：margin: 0 auto 写了但没反应 → 检查父容器是否是 display: flex 或 display: grid（会接管对齐逻辑）；或子元素用了 float / position: absolute（脱离文档流）。
立即学习“前端免费学习笔记（深入）”；
- 图片要走这条路？先加
display: block：<img src="x.png" style="display: block; width: 200px; margin: 0 auto;"> - 文字不能直接用这个方法——
<p>默认块级但宽度是 100%，没有“剩余空间”可分；需包裹进定宽容器再设margin: 0 auto - 兼容性好，IE8+ 都支持，但不解决垂直居中
flex 布局实现图文同时居中必须配齐三要素
只写 display: flex 不够，只写 justify-content: center 只能水平居中。图文同时居中，要同时满足：
- 父容器设
display: flex（否则子元素不是 flex item） - 同时写
justify-content: center（水平）和align-items: center（垂直） - 父容器必须有明确高度（如
height: 100vh），否则align-items无法计算垂直基准
图文混排时，<p> 和 <img> 会被当作两个独立 flex item，可能错位；建议统一包进一个子 <div> 再居中。
副作用：子元素的 float、vertical-align、传统 margin 对齐全部失效。
绝对定位 + transform 是唯一不依赖尺寸的真居中
当你面对动态加载、尺寸未知的元素（比如弹窗、响应式图标），又不想写死 width / height，这是最可靠的方式。
核心逻辑：top: 50%; left: 50% 把元素左上角移到容器中心，再用 transform: translate(-50%, -50%) 把自身回拉一半宽高。
- 示例：
<div class="popup" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">内容</div> - 不要只靠
top: 50%; margin-top: -Xpx——X 得提前知道高度，不适用于响应式或动态内容 - 注意：父容器必须设
position: relative或其他非static值，否则定位会相对于 viewport
真正容易被忽略的点是：几乎所有居中方案都对父容器状态敏感。text-align 失效常因父容器用了 flex；margin auto 失效常因父容器是 grid；flex 居中失败常因忘了设 height。先看父容器，再调子元素。
