CSS居中失效主因是元素类型、父容器布局模式及是否脱离文档流不匹配：text-align仅对行内内容有效，margin:0 auto需块级+定宽，Flex居中要求父容器有高度且子元素为有效Flex项目，绝对定位需配合transform回拉。
居中不是单一操作，而是由元素类型、父容器布局模式、是否脱离文档流共同决定的——抄代码不看上下文，90%会失效。
text-align: center 只对行内内容起作用
它不居中 div，也不影响 margin 或 position。真正生效的是文字、span、img（当它是 inline 时）、button 等默认内联行为的内容。
- 错误写法：
div { text-align: center; }+ 里面一个没设宽的div→ 子div不动 - 正确用法：给父容器加
text-align: center，子元素是文字或img（且未设display: block）→ 文字/图片水平居中 - 注意：
text-align对垂直方向完全无效，也不能让块级子元素“跟着居中”
margin: 0 auto 仅对有 width 的块级元素有效
这是最常被误用的居中方式。浏览器靠左右外边距均分剩余空间实现居中，所以没有“剩余空间”就无法计算。
- 必须同时满足：元素是块级（
display: block或默认块级）、显式设置了width（不能是100%）、父容器不是flex或grid - 常见失效现象：
div写了margin: 0 auto却不动 → 检查是否漏了width，或被float/inline-block改变了显示类型 - 兼容性好（IE6+），但无法垂直居中；若父容器高度不确定，别指望它能“垂直+水平”一起解决
Flex 布局居中要管住父容器和子元素两个层面
display: flex 本身不居中，真正起作用的是 justify-content 和 align-items —— 而且它们只对直接子元素（即 Flex 项目）生效。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: flex，且通常需明确高度（尤其做垂直居中时，否则align-items没参照） - 子元素不能是
position: absolute或float，否则脱离 Flex 流，justify-content对它无效 - 如果子元素写了
width: 100%，它会撑满父容器，justify-content: center就失去意义 - 简写组合：
display: flex; justify-content: center; align-items: center;—— 这才是双向居中的最小可行配置
绝对定位 + transform 是脱离文档流场景的可靠解
模态框、提示层、固定定位按钮等需要脱离正常流又必须精确定位的场景，这个组合最稳。
- 父容器必须有
position: relative（或其他非static值），否则top: 50%会相对于视口定位，滚动时偏移 - 子元素设
position: absolute; top: 50%; left: 50%，再用transform: translate(-50%, -50%)把自身中心拉回原点 - 不需要知道子元素宽高，
transform是基于自身尺寸计算的，动态内容也能对齐 - 注意：这个方案会让元素脱离文档流，不影响其他元素布局，但也意味着它不再参与父容器的 flex/grid 对齐逻辑
最容易被忽略的一点：居中失效往往不是 CSS 写错了，而是你没意识到当前元素已经脱离文档流（比如用了 position: absolute），或者父容器的布局模式（flex/grid）覆盖了传统 margin 行为。先确认“它在哪个流里”，再选方案，比反复试错快得多。
