没有“万能居中代码”，不同场景必须用不同方案：text-align: center仅对行内内容有效；margin: 0 auto需块级+显式width；Flex需display: flex+justify-content+align-items+高度；绝对定位需position: relative+transform。
直接说结论：没有“万能居中代码”，不同场景必须用不同方案。写错一个属性、漏掉一个条件，居中就失效——而且往往看不出报错，只是不动。
text-align: center 只对行内内容有效
它不控制块级元素自身位置，只让子元素（文字、<img>、<span>）在父容器里水平居中。
- 常见错误现象：
<div style="text-align: center"><div>我还在左边</div></div>—— 内层<div>是块级，不受影响 - 正确用法：给父容器设
text-align: center，再把图片或文字当行内内容处理（<img>默认就是行内） - 别给
<img>自己加text-align: center—— 这个属性对它自己无效 - 如果想让块级子元素“被居中”，得先把它变成
display: inline-block，但要注意换行符产生的空白间隙
margin: 0 auto 要求块级 + 显式 width
这是最兼容、最稳定的水平居中方式，但条件严苛，缺一不可。
- 常见错误现象：写了
margin: 0 auto却没反应 —— 大概率是忘了设width，或者元素被改成display: inline或flex - 必须同时满足：
display: block（默认值）、有明确width（如width: 600px或width: 80%）、父容器不能塌陷（比如不能是float或inline-block） - 它只管水平方向；
margin: auto 0或margin: auto在非 Flex 场景下对垂直方向完全无效 - 响应式建议用
max-width: 1200px; width: 100%组合，避免固定像素在小屏上溢出
Flex 布局实现水平+垂直居中需三要素齐备
现代项目首选，但最容易翻车的地方是漏掉任意一项。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设：
display: flex+justify-content: center+align-items: center - 父容器必须有可参考的高度：比如
height: 100vh、min-height: 500px，否则align-items: center没空间可居中 - 别直接在
<body>上加display: flex—— 它会让所有直系子元素变成 flex item，破坏原有结构 - 旧版 Safari（iOS 9–10）需要
-webkit-justify-content和-webkit-align-items前缀
绝对定位 + transform(-50%, -50%) 适合弹窗类脱离流元素
它不依赖父容器尺寸，但要求你知道目标元素宽高（或能通过 JS 获取），且父容器需 position: relative。
- 核心写法：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 别用
margin-top: -Xpx替代transform—— 需要预先知道元素尺寸，响应式下极易错位 - 父容器若没设
position: relative，定位会相对于<html>，容易跑偏 - 慎用于多列布局或流式内容中 —— 它脱离文档流，可能遮挡其他元素或影响滚动行为
真正难的不是写哪一行代码，而是判断当前元素的 display 类型、父容器是否塌陷、有没有高度上下文——这些细节不查开发者工具，光看 HTML 结构根本发现不了。
