flex模态框居中需父容器设display: flex并同时用justify-content:center和align-items:center；避免position:absolute脱离流；高度需明确；内容溢出时加max-width/max-height；遮罩层须与模态框同级且z-index合理；ie11可用flex-direction:column+margin:auto替代。
Flex容器里模态框不居中？检查父容器是否设了 display: flex 和 justify-content/align-items
Flex居中模态框的前提是父容器必须是Flex上下文，且同时启用两个方向的对齐。只写 justify-content: center 只能水平居中，垂直方向毫无作用；漏掉 align-items: center 是最常见的失焦原因。
- 父容器需明确设置
display: flex（不能靠继承或隐式触发） - 必须同时声明
justify-content: center（主轴居中）和align-items: center（交叉轴居中） - 如果模态框本身设置了
position: absolute，会脱离Flex流，导致居中失效——这是高频踩坑点 - 父容器高度需有明确值（如
height: 100vh），否则align-items: center在无高度约束时可能无效
模态框内容溢出时居中偏移？用 min-width/min-height 配合 max-width 控制尺寸边界
Flex居中依赖子项尺寸参与计算。当模态框内容过长、宽度超出视口，或未限制最大尺寸时，justify-content 仍会按实际宽度居中，视觉上就“偏右”或“压边”。这不是居中逻辑错了，而是尺寸失控。
- 给模态框加
max-width: 90vw和max-height: 90vh，防止撑破视口 - 配合
min-width: 300px（或其他合理下限），避免在窄屏下缩得太小 - 内部内容用
overflow-y: auto处理超长文本，而不是任其拉伸模态框 - 慎用
flex: 1在模态框上——它会让模态框占满剩余空间，破坏居中意图
需要背景遮罩层？遮罩层必须和模态框同级，且父容器要设 position: relative
很多人把遮罩层（overlay）嵌套在模态框内部，或放在不同层级，结果遮罩盖不住、模态框被遮挡、点击穿透……根本原因是层叠上下文和定位关系没理清。
- 遮罩层和模态框应为兄弟元素，同属一个Flex父容器
- 父容器加
position: relative，为后续z-index提供锚点 - 遮罩层设
position: fixed或absolute+inset: 0，并设z-index: 1000 - 模态框设
z-index: 1001，确保浮在遮罩之上；不要依赖默认堆叠顺序 - 若用
position: fixed做遮罩，注意它会脱离文档流，Flex对齐对其无效——此时居中逻辑要移到遮罩层内部再套一层Flex容器
IE11兼容性问题：align-items: center 对 min-height 不生效？改用 flex-direction: column + margin: auto
IE11对Flex交叉轴对齐的支持不稳定，尤其当父容器仅靠 min-height 而非 height 定义高度时，align-items: center 常常失效。这不是bug，是IE11渲染引擎对Flex尺寸计算的局限。
- 绕过方案：父容器设
display: flex+flex-direction: column，再给模态框加margin: auto -
margin: auto在Flex容器中会同时作用于主轴和交叉轴，IE11对此支持更可靠 - 需确保模态框是唯一子元素，或其它子元素明确设
flex: none，否则margin: auto行为不可控 - 此方案无需依赖父容器高度声明，
min-height也能正常工作
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
