手机端Flex居中失效的根本原因是父容器缺乏明确高度，需设置html、body{min-height:100vh;height:100%}并确保居中容器有显式高度，避免iOS Safari地址栏抖动及高度链断裂。
为什么手机端 Flex 居中经常失效
根本原因不是 Flex 写错了，而是父容器没高度——body 和 html 默认不占满视口，align-items: center 垂直方向就失去参考基准。尤其在 iOS Safari 上，100vh 会因地址栏收放抖动，导致居中内容上下跳。
必须加的两行 CSS 才能真居中
只写 display: flex; justify-content: center; align-items: center 不够。得给根容器“钉死”高度：
-
html, body { min-height: 100vh; height: 100%; }—— 双保险防 Safari 抖动 - 居中容器（比如
.modal或#app）必须有明确高度来源，不能靠内容撑开
示例：
html, body {
margin: 0;
padding: 0;
min-height: 100vh;
height: 100%;
}
<p>.center-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%; /<em> 这行不能少 </em>/
}
移动端特别要避开的坑
这些操作会让 Flex 居中在手机上“看起来居中、实际偏移”：
立即学习“前端免费学习笔记（深入）”；
- 给居中子元素加
margin-top或transform: translateY()—— Flex 计算被干扰，缩放/滚动时漂移 - 用
flex-direction: column但忘了justify-content此时管垂直、align-items管水平，容易记反 - 子元素嵌套过深，中间某层没设
height: 100%或display: flex，高度链断了 - 用
vh单位但没配min-height，Safari 下首次渲染后地址栏消失，容器突然变高
更稳的备选方案：用 margin: auto 替代 align-items
当父容器高度确定（比如固定 height: 400px 或全屏），直接对子元素设 margin: auto 更可靠：
- 它不依赖主轴/交叉轴方向，自动在两个维度上居中
- 在老版本 Android WebView 中兼容性比
align-items: center更好 - 注意：父容器必须是
display: flex，且子元素不能设float或position: absolute
示例：
.container {
display: flex;
height: 100vh;
}
.centered-item {
margin: auto;
}
真正麻烦的从来不是怎么写 Flex，而是哪一层该设高度、哪一层该传高度、哪一层其实根本没高度——手机端尤其敏感。
