弹窗居中需父容器设 display: flex 并配 align-items: center 和 justify-content: center；子内容区加 min-height: 0 防撑高；用 max-height + overflow-y: auto 实现自适应滚动；ie11 需 -ms-flex-align: center；遮罩层须有明确高度（如 min-height: 100vh）。
弹窗内容高度不居中？检查父容器是否设了 display: flex 和 align-items: center
只写 align-items: center 但没给父容器加 display: flex，样式完全不生效。Flex 的对齐属性必须在 Flex 容器上下文中才起作用，不是“写了就居中”。
常见错误写法：
.modal { align-items: center; }
这行代码无效——.modal 不是 Flex 容器，align-items 被浏览器直接忽略。
正确做法是确保弹窗的**直接父容器**（通常是遮罩层 .overlay）启用 Flex 并设置对齐：
.overlay { display: flex; align-items: center; justify-content: center; }
注意：justify-content: center 控制水平居中，align-items: center 控制垂直居中，二者缺一不可。
弹窗本身高度撑不开？别漏掉 min-height: 0 或 overflow: hidden
当弹窗内容区（比如 .modal-content）内部有滚动区域，或嵌套了另一个 Flex 容器时，浏览器会默认给它一个最小高度（通常等于内容高度），导致 align-items: center 失效——看起来“卡在顶部”，实际是父容器被子项撑高了，失去居中基准。
解决方法是显式压制这个隐式最小高度：
- 给弹窗内容区加
min-height: 0（推荐，语义清晰） - 或加
overflow: hidden（副作用小，兼容性更好）
示例：
.modal-content { min-height: 0; }
不加这句，哪怕父层 align-items: center 写得再对，弹窗也可能贴着顶部显示。
弹窗高度自适应但又不能溢出视口？用 max-height + overflow-y: auto
纯居中不难，难的是“内容多时自动滚动、内容少时紧凑居中”。这时候不能只依赖 align-items，还得控制弹窗自身尺寸边界。
关键组合：
-
max-height: 90vh：限制最大高度，留出安全边距 -
overflow-y: auto：内容超限时出现滚动条 -
margin: 0 auto配合固定width：防止过宽内容横向溢出
注意：不要同时设 height: 100% 和 max-height，前者会锁死高度，滚动失效。
IE11 下居中失效？补 -ms-flex-align: center
IE11 对 Flex 属性支持不完整，align-items 必须加前缀才能生效。只写标准属性，在 IE11 中弹窗会默认顶部对齐。
兼容写法：
.overlay { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; }
更稳妥的做法是用 Autoprefixer 自动补全，但手动写时别漏掉 -ms-flex-align ——这是 IE11 中 align-items 的真实命名称。
真正容易被忽略的是：居中行为依赖整个高度链的稳定性。如果遮罩层 .overlay 高度是 auto 且内部只有弹窗一个子元素，那它高度就等于弹窗内容高度，align-items: center 实际上没有可居中的“剩余空间”。此时必须确保遮罩层有明确高度来源，比如 min-height: 100vh 或绑定到 body 高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
