垂直居中需分场景选型：现代项目首选flex（display: flex + align-items: center），但父容器必须设height/min-height且为flex容器；grid（place-items: center）极简但仅适用于单子元素；absolute+transform兼容旧浏览器，但父容器须position: relative；line-height仅限单行文本。
直接说结论：垂直居中不是“学一种方法就行”，而是得按场景分层选型——flex 适合现代项目主流程，absolute + transform 用于兼容老浏览器或嵌套受限场景，grid 的 place-items: center 适合单子元素极简需求，而 line-height 只能应付单行文本。
为什么 flex 布局写了却没效果？
很多人复制了 display: flex 和 align-items: center，结果元素还是贴顶。问题不在代码本身，而在父容器缺失两个硬约束：
- 父容器没设
display: flex——align-items对非 flex 容器完全无效 - 父容器高度塌陷（比如只写了
width、没设height或min-height，内部又没内容撑开）—— flex 的交叉轴没长度参考，“center”就无从计算 - 子元素同时用了
margin: auto—— 尤其在 Safari 中会和 flex 居中冲突，导致上下偏移
验证顺序建议：先用浏览器开发者工具检查父容器 computed style，确认 display 确实是 flex，再看 height 是否为具体数值（如 100vh）或被内容撑开。
absolute + transform 在什么情况下必须加 position: relative？
这个组合（position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%)）看似简单，但行为强依赖定位上下文：
- 父容器没设
position: relative（或absolute/fixed）→top: 50%会相对于 viewport 计算，滚动时子元素飘走 -
transform必须写成translate(-50%, -50%)，不能拆成translateX(-50%) translateY(-50%)—— 多写易漏、易拼错，且无收益 - 子元素宽高动态（如图片未加载完、字体未就绪）会导致短暂闪动；可提前设
min-height或用aspect-ratio缓解
它不关心子元素尺寸是否固定，这点比负 margin 方案更灵活，但对定位上下文的依赖是刚性前提。
place-items: center 为什么不是万能替代 flex？
display: grid; place-items: center 是语义最强、代码最简的方案，但它有明确适用边界：
- 最低支持 Chrome 57 / Firefox 52 / Safari 10.1+；IE11 需回退到
justify-items: center; align-items: center - 若父容器已有复杂
grid-template-areas或轨道定义，place-items可能覆盖原有对齐逻辑 - 它对所有直接子元素生效，不要求子元素是 “grid item”，但也不适合需要主轴/交叉轴分别控制的多子元素布局
它本质是单个子元素居中的极简选择，不是 flex 的通用替代品。
line-height 居中为什么只适用于单行文本？
line-height 和 height 相等确实能让单行文字“看起来”垂直居中，但这是假居中：
- 换行后文字会溢出或顶部对齐，因为
line-height控制的是行高，不是容器内整体居中 - 对
span等行内元素无效，除非先转成块级（如加display: block） - 无法处理图片、按钮等非文本子元素，哪怕图片是“特殊文本类型”，一旦尺寸超出预期，对齐就失效
真正容易被忽略的是：几乎所有方案都依赖父容器有“可测量的交叉轴长度”。没有高度约束的 flex 容器、没有定位上下文的 absolute、没有显式尺寸的 grid 容器，都会让居中计算失去参照——这不是 bug，是 CSS 布局的本质约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
