用 display: flex + justify-content: center + align-items: center 实现居中需确保父容器有明确高度（如 height: 100vh），且子元素非纯 inline 元素（需设 display: block 等），否则无法垂直居中。
直接用 display: flex + justify-content: center + align-items: center，三行搞定，且不依赖子元素尺寸。
父容器必须有明确高度
Flex 的 align-items: center 垂直居中效果，依赖父容器在交叉轴（垂直方向）上有可参考的尺寸。如果父容器高度由内容撑开，align-items 就“没地方可居”。
- 常见错误：只写
display: flex; justify-content: center; align-items: center，但父容器没设height或min-height - 推荐写法：
height: 100vh（全屏）、min-height: 100vh（至少满屏）、或具体像素值如height: 400px - 若父容器是 body，注意默认 margin 会影响布局，建议先重置：
body { margin: 0; }
子元素不能是纯 inline 元素
align-items 对纯 <span>、<img> 这类 inline 元素无效，因为它们没有块级盒模型参与 Flex 侧轴对齐。
- 解决方法：给子元素加
display: block或display: inline-block - 如果是单个文字，更稳妥的做法是套一层
<div>，或直接让父容器用text-align: center+line-height（仅限单行） - 不要混用
margin: auto和 Flex 居中——margin: auto在 Flex 容器里会失效或行为不可控
兼容性底线是 IE10+
现代项目基本没问题，但若需支持 IE9 或更老版本，display: flex 不可用，得换方案。
立即学习“前端免费学习笔记（深入）”；
- IE9 可用
position: absolute+top: 50%+left: 50%+transform: translate(-50%, -50%) - IE8 及以下只能靠 JS 计算或固定宽高的负 margin（
margin-left: -50px），已不建议维护 - 移动端 iOS Safari 7.1+、Android Chrome 29+ 全面支持 Flex，无需额外前缀
真正麻烦的不是写哪几行 CSS，而是判断父容器有没有高度、子元素是不是 inline 类型——这两点漏掉，代码看着对，实际就是不居中。
