移动端引导页垂直居中需同时设置justify-content: center和align-items: center，且父容器必须有明确高度（如height: 100dvh），仅justify-content无效因其仅作用于主轴（默认水平），而垂直居中依赖交叉轴对齐。
移动端引导页要做垂直居中，justify-content: center 单独用没用——它只管主轴（默认是水平方向），垂直居中必须配合 align-items: center，且父容器得有明确高度。
为什么只写 justify-content:center 不生效？
因为 justify-content 默认作用于主轴，而 Flex 默认主轴是 row（水平方向）。你想要垂直居中，实际需要控制的是交叉轴（即垂直方向），这得靠 align-items: center。
- 误以为
justify-content能“自动识别方向”，其实它完全依赖flex-direction的设定 - 如果真把主轴改成
column，那justify-content: center就管垂直了，但此时align-items: center反而管水平——容易绕晕，不推荐为居中而强行改主轴 - 绝大多数引导页结构是“单层容器 + 一个子内容块”，保持
flex-direction: row（默认）+justify-content: center+align-items: center最直观
父容器没设高度，Flex 垂直居中就“消失”
这是最常卡住人的点：align-items: center 需要交叉轴（垂直方向）有可计算的长度。如果父容器靠内容撑高，它的高度就是子元素自身高度，自然没有“居中空间”。
- 移动端引导页常用
height: 100vh，但注意 iOS Safari 地址栏收放时100vh会跳变，视觉上像在抖动 -
min-height: 100vh不行——它只保证最小值，不提供对齐所需的确定基准 - 更稳的写法是
height: 100dvh（dynamic viewport height），2026 年主流浏览器（Chrome 120+、Safari 17.4+、Firefox 115+）已支持，能响应地址栏变化 - 若需兼容老版本 Safari（如 iOS 15.6），可 fallback 到 JS 动态设 height：
document.documentElement.style.height = window.innerHeight + 'px'
子元素用了 position: absolute，Flex 居中就失效
引导页里常加 loading 动画、蒙层或角标，一加上 position: absolute，它就脱离文档流，不再算作 flex item，justify-content 和 align-items 对它完全无效。
- 不要给要居中的主内容加
position: absolute；如果非要用，就单独包一层div做 flex 容器，让它只负责居中这个绝对定位元素 - 避免同时写
margin: auto和align-items: center——在 flex 容器里，margin: auto行为不可控，尤其在 Safari 中可能被忽略 - 图片等替换元素若未设宽高，加载前空白高度为 0，会导致短暂上移；可用
aspect-ratio: 1/1或min-height: 200px预留空间
小程序或 WebView 里要注意 display 值覆盖
微信小程序、部分 Android WebView（如旧版 UC）对 CSS 解析较严格，display: flex 若被后续声明覆盖（比如调试时多写了一行 display: block），整个 Flex 行为就没了，但开发者工具不会报错。
- 检查 Computed 面板里最终生效的
display值，确认是flex而不是block或-webkit-box - 别混用
place-items: center（Grid 语法）和 Flex 属性，它们不通用，写了也白写 - 在 iOS 14.5 以下或 Android 4.4 WebView 中，
align-items: center对某些 inline 元素（如span包裹的文字）可能偏移，建议外层套div并设display: block
真正麻烦的从来不是写哪几行 CSS，而是父容器有没有被其他样式（比如 padding、border、外部 Grid 容器的尺寸限制）悄悄吃掉高度，或者子元素是否在某个环节脱离了 Flex 流程。动手前先看一眼 Computed Height 和 display 值，比反复调 justify-content 管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
