移动端Flex居中失效的根本原因是父容器缺乏明确高度；需设min-height: 100vh或100dvh，并注意iOS Safari中100vh动态变化问题，推荐优先使用100dvh配合CSS变量降级方案。
移动端元素居中，用 display: flex 最可靠；但直接写 justify-content: center; align-items: center 往往失效——问题不在写法，而在父容器没撑开高度或没设 height/min-height。
父容器必须有明确高度才能垂直居中
Flex 垂直居中（align-items: center）依赖父容器的“可用交叉轴尺寸”。在移动端，body 或 div 若没显式设高，其高度由子内容撑开，此时交叉轴（纵轴）无剩余空间，align-items 就无效。
- 常见错误：给一个空
div加display: flex+ 居中声明，结果元素贴顶 - 正确做法：父容器加
min-height: 100vh（推荐）或height: 100vh；vh单位在 iOS Safari 中需注意100vh可能被地址栏压缩，100dvh更稳（但兼容性略低） - 若父容器是
body，记得清除默认margin：body { margin: 0; }
单行文本/图标居中：别忘了 flex-direction: column
水平+垂直居中默认按主轴（row）和交叉轴（column）生效。如果只居中一个图标或按钮，用默认 flex-direction: row 没问题；但若想让文字块上下居中、自身又左对齐，容易忽略方向影响。
- 场景：一个
div里含h2和p，要整体垂直居中，但内部文字左对齐 - 错误写法：只加
justify-content: center—— 这会让文字也水平居中 - 正确写法：父容器设
flex-direction: column+justify-content: center+align-items: flex-start - 简例：
.container { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 100vh; }
iOS Safari 中 100vh 失效？换用 dvh 或 JS fallback
iOS Safari 在页面滚动时会动态调整视口高度（地址栏收起/展开），导致 100vh 瞬间变小，Flex 容器“塌缩”，居中偏移。这不是 CSS 写错了，是浏览器行为。
- 优先尝试
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) - 不建议用
position: absolute+top: 50%替代——它无法响应字体缩放、动态字号等可访问性需求
真正卡住人的往往不是 Flex 属性本身，而是父容器的高度来源是否稳定、是否被 viewport 变化干扰。尤其在 iOS 上，dvh 不是“锦上添花”，而是避免闪动和错位的实际必需项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
