最稳的垂直居中方案是 display: flex + align-items: center，但需父容器设 display: flex 且有明确高度（如 height: 100vh 或被内容撑开），缺一不可；失效时优先检查父容器是否启用 flex、高度是否塌陷、子元素 display 是否干扰上下文。
最稳的垂直居中方案是 display: flex + align-items: center，但必须满足两个硬条件：父容器设了 display: flex，且有明确高度（比如 height: 100vh 或被内容撑开）。漏掉任一条件，就会“写了却没效果”。
flex 布局失效时先查这三件事
很多人写完 display: flex 和 align-items: center 发现不居中，问题通常不在属性本身，而在上下文约束没到位：
- 父容器没加
display: flex——align-items对非 flex 容器完全无效 - 父容器高度塌陷（例如只写了
width、没设height或min-height，内部又没内容撑开）—— flex 的交叉轴没长度参考，“center”就无从计算 - 子元素是
display: block且宽度为100%—— 这不影响align-items垂直对齐，但容易让人误以为整个居中逻辑崩了
另外，margin: auto 在 Safari 中会和 flex 居中冲突，导致子元素上下偏移，务必避免混用。
绝对定位 + translate(-50%, -50%) 的真实限制
这个组合兼容性好（IE9+），但行为强依赖定位上下文，不是“写了就稳”：
- 父容器必须有
position: relative（或absolute/fixed）—— 否则top: 50%会相对于 viewport 计算，滚动时位置飘走 -
transform: translate(-50%, -50%)不能拆成translateX(-50%) translateY(-50%)单独写，否则易漏、易拼错，且无额外收益 - 子元素若宽高动态（如图片未加载完、字体未就绪），会出现短暂“闪动”—— 可提前设
min-height或用aspect-ratio缓解
它不关心子元素尺寸是否固定，这点比 margin 负值方案更灵活。
Grid 的 place-items: center 适合什么场景
如果项目最低支持 Chrome 57 / Firefox 52 / Safari 10.1+，display: grid; place-items: center 是语义最强、代码最简的方案：
- 一行搞定水平+垂直居中，不需要区分主轴/交叉轴
- 对所有直接子元素生效，不要求子元素是“grid item”或设
grid-area - IE11 不支持
place-items，需回退到justify-items: center; align-items: center; - 若父容器已有复杂
grid-template-areas或轨道定义，加place-items可能覆盖原有对齐逻辑，要小心叠加
它不是万能替代 flex 的工具，而是单个子元素居中的极简选择。
别碰 vertical-align: middle 的三个典型误用
vertical-align 是最容易被当“万能垂直居中”乱用的属性，但它只在两种场景下起效：
- 父容器是
display: table-cell（老式表格布局） - 元素自身是
inline或inline-block（比如img混排文字时）
对默认 display: block 的 div 直接写 vertical-align: middle —— 完全不会触发任何对齐行为。即使强行设成 inline-block，若父容器是普通 div（非 table-cell），它也只影响该元素在当前行框内的基线位置，不是整个容器的垂直居中。
真正难的不是选哪种方案，而是判断当前 DOM 结构和样式上下文是否满足该方案的前提条件。比如父容器用了 float 或 position: absolute，就可能让 flex 高度塌陷；又比如子元素带 will-change: transform，再叠加上 translate 就容易出偏移。这些细节不靠试，得靠条件检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
