现代项目优先用 display: flex + justify-content: center + align-items: center 实现水平垂直居中，但必须确保父容器有明确高度（如 height: 100vh 或 min-height: 100vh），否则 align-items: center 因交叉轴无可用空间而静默失效。
直接说结论：现代项目优先用 display: flex + justify-content: center + align-items: center，但必须确保父容器有明确高度；老项目或需兼容 IE10 的场景，用 text-align: center（文本/图片）或 margin: 0 auto（定宽块级元素），再补一层 position: absolute + transform: translate(-50%, -50%) 作兜底。
text-align: center 只对行内内容生效，别乱套在 div 上
这是最容易踩的坑：给一个 div 直接加 text-align: center，发现它自己没动——因为这个属性只作用于它的子元素，且只影响行内级内容（span、img、文字等）。它根本不管块级子元素。
- 适用场景：段落文字居中、图标按钮组、
img在卡片里水平居中 - 错误写法：
.container { text-align: center; } <div class="box">我不会被居中</div> - 正确写法：
.container { text-align: center; } <span>我会居中</span>或把.box改成display: inline-block - 兼容性极好：IE8+ 都支持，不用加前缀
margin: 0 auto 要生效，必须同时满足三个条件
写上 margin: 0 auto 却纹丝不动？八成是漏了其中一条。它不是“设了就中”，而是浏览器靠计算剩余空间来分配左右 margin，缺一不可。
- 子元素必须是块级（
display: block或默认行为，不能是inline） - 必须显式设置
width或max-width（width: 100%不行，没剩余空间） - 父容器不能是
display: flex或display: grid（会覆盖auto行为） - 常见错误现象：
div写了margin: 0 auto但左贴边——检查是否忘了width，或父容器用了flex
Flex 布局居中要垂直生效，父容器得有 height
justify-content: center 水平居中基本无压力，但 align-items: center 垂直居中依赖主轴方向的可用空间。如果父容器没设高度，它可能塌缩为内容高度，导致垂直居中失效。
立即学习“前端免费学习笔记（深入）”；
- 典型错误：
.parent { display: flex; justify-content: center; align-items: center; }—— 父容器没height，子元素只水平居中 - 解决方案：给父容器加
height: 100vh（视口高）、min-height: 100vh，或用height: 300px等固定值 - IE10/11 需要
-webkit-前缀：display: -webkit-flex、-webkit-justify-content: center、-webkit-align-items: center - 注意副作用：父容器变成 flex 后，子元素的
float、vertical-align和传统margin对齐全部失效
绝对定位 + transform 是脱离文档流时最稳的兜底方案
弹窗、加载遮罩、提示气泡这类需要脱离正常流的元素，flex 可能被外层布局干扰，margin: auto 失效，这时 position: absolute + transform: translate(-50%, -50%) 是最可靠的选择——它不依赖宽高，纯靠数值偏移。
- 关键三步：父容器加
position: relative（提供定位上下文），子元素加position: absolute; top: 50%; left: 50%，再加transform: translate(-50%, -50%) - IE9+ 支持
transform，IE8 及以下需降级（比如用已知宽高的负 margin） - 容易忽略的点：如果父容器没设
position: relative，top: 50%会相对于视口计算，滚动页面时元素会跑偏 - 可访问性注意：脱离文档流后，屏幕阅读器可能跳过该元素，建议加
aria-hidden="false"和role
真正复杂的地方不在写哪一行 CSS，而在于你得先判断：这个元素是行内还是块级？它要不要脱离文档流？父容器有没有高度约束？浏览器兼容底线在哪？选错方案，后面全是补丁。
