align-items: center在弹窗中不生效，根本原因是父容器高度为0或未设100dvh，导致交叉轴无可用空间；需同时设display: flex、justify-content: center、align-items: center，并用100dvh替代100vh防地址栏跳变。
移动端弹窗垂直居中，align-items: center 不生效，大概率不是 Flex 写错了，而是父容器高度没给对——尤其在 iOS Safari 和微信 X5 内核里，100vh 会随地址栏收放跳变，height: 0px 的父容器根本撑不起交叉轴。
为什么 align-items: center 在弹窗里不生效
常见错误现象：align-items: center 写了，但内容紧贴顶部；DevTools 里看父容器高度是 0px 或远小于预期。
- 父容器没设
height或min-height，仅靠display: flex不会自动撑高 - 用了
position: fixed却没设inset: 0或top: 0; bottom: 0; left: 0; right: 0，导致脱离文档流后无尺寸基准 - 直接在
<body>上写display: flex—— 微信 X5 内核和部分 iOS Safari 会忽略，必须包一层<div class="modal-root"> - 子元素用了
position: absolute（比如关闭按钮），它已脱离 flex 流程，align-items对它完全无效
100dvh 是必须的，但得有降级 fallback
移动端必须用 100dvh 而不是 100vh：iOS Safari 地址栏收放、Android 键盘弹出时，100vh 会突变（比如从 812px 缩到 600px），弹窗“上蹿下跳”；100dvh 是动态视口单位，Chrome 120+、Safari 17.4+、Firefox 115+ 已支持。
- 稳妥写法：
height: 100vh; height: 100dvh;（后者覆盖前者） - 老版本 Safari（如 iOS 15.6）需 JS 补偿：
document.documentElement.style.height = window.innerHeight + 'px'，并在resize和keyboarddidshow事件中更新 - 别用
min-height: 100vh—— 它只保底，不提供对齐所需的确定交叉轴长度
Flex 居中必须同时写 justify-content 和 align-items
只写 justify-content: center 是水平居中，不是垂直。默认 flex-direction: row 下，主轴是水平，交叉轴才是垂直。
立即学习“前端免费学习笔记（深入）”；
- 正确组合：
justify-content: center; align-items: center; - 如果误写了
flex-direction: column，那justify-content: center才管垂直，align-items: center反而管水平——容易绕晕，不推荐为居中强行改方向 - 微信 Android（X5 内核）初次渲染可能漏掉
align-items，加一层min-height: 1px到父容器可强制重算交叉轴尺寸
别和 transform 或 margin: auto 混用
弹窗内部若同时存在 transform: translate(-50%, -50%) 或子元素设了 margin: auto，会和 Flex 的对齐逻辑冲突，造成定位不可预测。
- 选一种方案到底：要么纯 Flex（父容器设
display: flex+100dvh），要么纯position: absolute+transform（更兼容老内核） - Element UI 的
.el-dialog默认是position: fixed，直接覆盖 Flex 容易失效，建议用::v-deep .el-dialog改成position: absolute+transform更稳 - 移动端键盘弹出时，
transform方案比 Flex 更少触发重排，性能更可控
真正麻烦的不是写哪几行 CSS，而是得判断当前运行环境：是否要兼容 iOS 15.6？有没有 X5 内核兜底需求？弹窗内容高度是否动态？这些细节一旦漏掉，center 就只是个幻觉。
