怎样用CSS flex构建一个完全居中的Modal弹窗-css教程-PHP中文网

遮罩层必须用 position: fixed + inset: 0 + display: flex；仅 width: 100%; height: 100% 错误，因依赖父容器高度，滚动或内容不足时会缩块、留白或偏移；inset: 0 等价于 top/right/bottom/left: 0，确保全屏覆盖，display: flex 激活居中能力。

怎样用css flex构建一个完全居中的modal弹窗

遮罩层必须用 `position: fixed` + `inset: 0` + `display: flex`

只写 width: 100%; height: 100% 是错的——它依赖父容器高度，页面一滚动或内容不足时，遮罩就缩成一块、留白、甚至跟着动。真正覆盖视口的写法是 position: fixed 配合 inset: 0（等价于 top: 0; right: 0; bottom: 0; left: 0），再加 display: flex 才能激活居中能力。

如果要兼容旧版 Safari（inset: 0 换成四边定位；但别用 min-height: 100vh 替代，它在 iOS Safari 键盘弹出时会塌缩，导致弹窗上移或错位。

background-color: rgba(0, 0, 0, 0.6)，禁用 opacity：后者会让弹窗里的按钮、文字一起变透明
确保 html 和 body 都设了 height: 100%，否则 100vh 或 height: 100% 在某些嵌套场景下会失效
所有祖先元素不能有 transform、filter、will-change 或 overflow: hidden：这些会创建新层叠上下文，让 fixed 相对于该祖先定位，而不是视口

`align-items: center` 和 `justify-content: center` 必须同时作用于遮罩层

只写 justify-content: center 只能水平居中，因为默认主轴是 row；只写 align-items: center 只能垂直居中，因为默认交叉轴是垂直方向。两者缺一不可，且必须写在遮罩层（即 display: flex 的直接父容器）上。

常见错误是把这两个属性写在弹窗盒子（.modal-content）上——它不是 Flex 容器，写了也无效；或者写在隔了一层的 wrapper 上，Flex 规则根本传不下去。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

弹窗盒子本身不用 position: absolute，也不用 transform: translate(-50%, -50%)：它只是遮罩层的一个普通子元素，在 Flex 布局里天然被“托”到正中心
若弹窗内部还要居中文本或按钮，那是它自己的事，和外层居中逻辑无关
IE11 中 align-items: center 对图片等替换元素可能有 1–2px 偏移，如必须支持，可临时改用 display: table-cell + vertical-align: middle 替代

弹窗内容区域必须设 `max-width` 和 `max-height` + `overflow-y: auto`

不加约束时，Flex 会把弹窗拉满整个视口，小屏下直接贴边、文字挤成一团；更麻烦的是，如果内容超长又没设滚动，它会直接溢出屏幕底部，用户完全看不到下半部分。

max-width: 90vw 防止横屏时过宽，max-height: calc(100vh - 120px) 比硬写 85vh 更可靠——预留标题栏、按钮区等固定高度；overflow-y: auto 必须加在弹窗盒子（.modal-content）上，而不是遮罩层，否则背景内容也会跟着滚动。

绝对不要给弹窗盒子设 height 或 flex: 1：前者锁死尺寸，破坏居中弹性；后者在非 Flex 子容器中无效，在 Flex 容器中又容易抢走高度，导致内容被压缩
iOS Safari 上记得加 -webkit-overflow-scrolling: touch，不然内部滚动卡顿或跳变
如果弹窗里有表单输入框，iOS 键盘弹出会触发视口重算，此时 min-height: 100vh; height: 100% 组合比单用 100vh 更稳

层级与焦点管理不是 Flex 负责的事，但常被当成“居中失败”

Flex 只管视觉对齐，不处理 z-index、pointer-events 或键盘焦点。很多人发现弹窗“没出来”，其实是被其他元素盖住了，或者遮罩层意外加了 z-index: 0，导致它沉底。

还有人点开弹窗后按 Tab 键焦点乱跑、Esc 关不掉、关闭后焦点没回退——这些全是 JS 层要补的逻辑，和 CSS 居中毫无关系。但它们发生时，第一反应常是“Flex 写错了”，结果调半天布局，问题根本不在那儿。

.modal-overlay 推荐 z-index: 1000，.modal-content 至少 z-index: 1001，中间别插任何带 z-index 的祖先
确保弹窗盒子有 tabindex="-1"，打开时手动 .focus()，否则键盘用户根本进不去
遮罩层点击事件监听时，必须用 event.target === overlay 判断，否则点弹窗内容也会关闭——这不是 Flex 的锅，是事件委托没写对