flex垂直居中失效的根本原因是父容器高度为0，解决方案依次为：优先用min-height: 100dvh；兼容老浏览器则用js注入--vh变量并calc计算；务必清除body默认margin；多行文本必须依赖有明确高度的flex布局，而非line-height或vertical-align。
父容器没高度，Flex居中就是摆设
直接写 display: flex + justify-content: center + align-items: center 在移动端大概率失效——不是代码错，是父容器实际高度为 0。Flex 的 align-items: center 必须依赖交叉轴（垂直方向）有可计算的尺寸，而移动端常见场景下：body 或包裹层没设高、内容又短，容器就塌了。
- 加
min-height: 100vh是最简解法，但 iOS Safari 在地址栏收起/展开时会重算vh，导致内容跳动 - 更稳的选择是
min-height: 100dvh（dynamic viewport height），Chrome 105+ / Safari 16.4+ 支持，它始终反映当前可视区域高度 - 兼容老版本？用 JS 注入真实高度：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，再在 CSS 中写min-height: calc(var(--vh, 1vh) * 100) - 别忘了清掉
body { margin: 0 }，默认外边距会让容器“看起来有高度”，实则不可靠
多行文本垂直居中，别碰 line-height + vertical-align
给父容器设 line-height 等于高度、子元素设 display: inline-block + vertical-align: middle，在移动端对多行文本基本不可控：换行后 line-height 失效，小字号（如 10px–11px）下渲染偏移明显，iOS Safari 尤其容易视觉错位。
- 真正有效的做法仍是 Flex，但必须确保父容器有明确高度上下文（见上一条）
- 如果文本极短（比如两三个字）且设了
max-width，记得额外加text-align: center到子元素，否则水平居中不生效 - 避免在 Flex 容器里对子元素再设
vertical-align——它对 Flex 项完全无效
多个子块整体垂直居中，flex-direction: column 是关键
一个 div 里含 h2 和 p，要它们作为一个整体垂直居中，但内部文字保持左对齐——只写 justify-content: center 会把文字也水平居中，这是方向没理清。
- 必须显式声明
flex-direction: column，此时justify-content: center控制的是子元素在纵轴上的分布位置 -
align-items: flex-start让每段文字自身左对齐，而不是继承父级的居中行为 - 如果子元素是多个
p或span，不要用text-align: center去“模拟”垂直居中，那是水平对齐属性，对垂直无影响
别为兼容回退到 table-cell 或 absolute + transform
现代项目里，display: table-cell 的盒模型副作用（如无法设置 padding、margin 失效、响应式难控制）远大于收益；position: absolute + top: 50% + transform: translate(-50%, -50%) 虽然兼容性好，但无法响应字体缩放、动态字号等可访问性需求，且在视口缩放或 iOS 动态字体开启时容易偏移。
真正卡住人的从来不是 Flex 属性本身，而是父容器的高度来源是否稳定、是否被 viewport 变化干扰。哪怕只是加一行 min-height: 80px，也比反复调 transform 或猜 line-height 靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
