align-items: center不生效的根本原因是父容器缺乏真实高度，需确保html/body设height:100%、遮罩层用position:fixed+inset:0+display:flex+min-height:100vh+height:100%组合，并优先使用100dvh应对移动端视口变化。
为什么align-items: center写了却弹窗还是贴顶
根本不是 Flex 属性写错了，而是父容器没拿到“真实高度”。align-items: center只在交叉轴有可用空间时才生效；如果父容器计算出的高度是 0px 或远小于视口，它就无处可居中。DevTools 里一查，遮罩层（比如 .modal-overlay）高度经常是 0 或异常值。
-
html和body必须显式设height: 100%，否则子级的height: 100vh无继承基准 - 仅用
position: fixed不够，必须配inset: 0（或top: 0; right: 0; bottom: 0; left: 0），否则脱离文档流后尺寸丢失 -
100vh在 iOS Safari 中会随地址栏/软键盘动态变化，导致高度突变，不能单独依赖
.modal-overlay 必须写的四条关键样式
遮罩层不是“铺满就行”，它是整个居中逻辑的锚点。缺一不可：
-
position: fixed—— 锚定视口，滚动时不偏移 -
inset: 0—— 比width: 100vw; height: 100vh更可靠，绕过老 WebView 解析 bug -
display: flex; justify-content: center; align-items: center—— 双轴居中，弹窗无需transform或absolute -
min-height: 100vh; height: 100%——min-height保底一屏，height: 100%在键盘弹出等场景下能回退到实际html高度
漏掉任意一条，都可能在某个机型或交互状态下失效。
移动端必须用 100dvh 而不是 100vh
iOS Safari 地址栏收放、Android 键盘弹出时，100vh 会跳变（比如从 812px 突然缩到 600px），造成弹窗“上蹿下跳”。100dvh 是动态视口单位，2026 年主流浏览器（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 会把 .modal-content 拉伸到填满整个视口，尤其在小屏下破坏体验；也不该让整个 overlay 滚动，否则背景内容会跟着动。
- 推荐设
max-width: 90%; max-width: 400px，避免过宽 - 加
max-height: 90vh; overflow: auto，内容超长时内部滚动 - 子元素若用了
position: absolute（比如关闭按钮），它已脱离 flex 流程，align-items对它无效 - 避免与
transform: translate(-50%, -50%)或margin: auto混用，容易冲突
真正难的不是写那几行 Flex 样式，而是意识到：居中失败从来不是因为属性没写对，而是高度链断在了某一层——html → body → .modal-overlay → .modal-content，任一环节没传下去，align-items 就成了摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
