根本原因是父容器缺乏稳定高度约束与滚动层级分工不清：ios中100vh随地址栏变化导致高度突变，align-items仅控制对齐不设尺寸上限，需用inset:0+min-height:100vh+height:100%锚定视口，并确保.modal-content仅设max-height和overflow-y:auto。
直接用 display: flex + justify-content: center + align-items: center 就能居中，但滚动失效、iOS偏移、小屏溢出——问题不在Flex写法本身，而在高度约束和滚动容器的层级分工没理清。
为什么 align-items: center 居中了却不能滚动
常见现象是内容一多，.modal-content 直接顶出屏幕底部，或顶部被切掉、滚动条不出现。根本原因不是漏了 overflow-y: auto，而是外层 .modal-overlay 没给子元素提供「可滚动的计算空间」：
-
height: 100vh在 iOS Safari 中会随地址栏/软键盘收放突变（比如从 812px 跳到 600px），导致max-height失效 -
align-items: center只控制对齐，不控制尺寸上限；内容高过交叉轴可用空间时，Flex 默认溢出，不自动截断 - 给
.modal-content加了height: 100%或flex: 1，它就脱离 Flex 居中流，滚动和居中同时崩坏
必须写的父容器样式：.modal-overlay
遮罩层不是“铺满就行”，它是整个滚动逻辑的锚点。缺一不可：
-
position: fixed—— 锚定视口，不随滚动偏移 -
inset: 0（或top: 0; right: 0; bottom: 0; left: 0）—— 比width: 100vw; height: 100vh更可靠，绕过老 WebView 解析 bug -
display: flex; justify-content: center; align-items: center—— 双轴居中，弹窗无需transform或absolute -
min-height: 100vh; height: 100%—— 关键组合：前者保底，后者在视口缩小时（如键盘弹出）能跟随html实际高度回退 -
z-index: 9999—— 查当前项目最高z-index（如 Ant Design 是 1000），取明显更大值 - 确保
html和body都设了height: 100%，否则height: 100%无参照
.modal-content 的宽度、高度与滚动设置
弹窗本体要配合父容器“交出控制权”，只设上限，不锁死尺寸：
- 用
w-full max-w-md（Tailwind）或width: 100%; max-width: 500px—— 小屏自适应，大屏不撑爆 - 禁用
height、min-height、flex: 1；只设max-height: calc(100vh - 120px)（预留标题、按钮等固定区域），比硬写80vh更稳 - 必须加
overflow-y: auto，且仅作用于.modal-content自身 - iOS 上加
-webkit-overflow-scrolling: touch保滚动顺滑 - 内部含长文本、表格或代码块时，额外加
min-h-0（Safari 中防止 flex 子项不收缩）
移动端特别注意的兼容点
不是所有浏览器都把 100vh 当成“稳定视口”：
- 优先用
100dvh（dynamic viewport height），Chrome 120+、Safari 17.4+、Firefox 115+ 已支持；降级写法：height: 100vh; height: 100dvh - 老版 Safari（iOS 15.6 及更早）需 JS 补偿：
document.documentElement.style.height = window.innerHeight + 'px'，并在resize和键盘事件中更新 - 微信 Android（X5 内核）初次渲染可能漏掉
align-items，给.modal-overlay加min-height: 1px可强制重算 - 避免在
.modal-content上混用transform: translate(-50%, -50%)或margin: auto，会和 Flex 对齐冲突，尤其在 Safari 中抖动
真正翻车的点，往往不是 Flex 写错了，而是把「居中」和「滚动」当成两个独立任务去处理——其实它们共享同一套高度约束逻辑。父容器没给够“弹性空间”，子容器再怎么设 max-height 也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
