最可靠方案是display: flex配合align-items: center和justify-content: center；inset仅为定位简写，不解决居中问题且兼容性差，无法替代flex布局。

用 display: flex + align-items: center + justify-content: center 是目前最可靠、最易维护的响应式模态框居中方案；inset 属性虽新（CSS Logical Properties），但兼容性差（Chrome 127+ / Safari 17.4+ 才支持），不建议在生产环境单独依赖它做居中。

为什么不用 inset 做模态框居中

inset 是 top/right/bottom/left 的逻辑简写，语义上更清晰，但它本身不解决“居中”问题——你仍需配合 margin: auto 或 transform 才能真正居中。而且：

• IE 和旧版 Edge 完全不支持
• Firefox 目前（2026年5月）尚未实现 inset，仅部分实验性前缀可用
• 即使浏览器支持，inset: 0 只是铺满视口，不是居中；若想居中内容，还得加 Flex 或 Grid

display: flex 搭配 position: fixed 的实操要点

这是当前线上项目最稳妥的组合，关键不在“用了 Flex”，而在于父容器的定位和尺寸控制是否闭环：

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

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

下载

• 外层 .modal-overlay 必须设 position: fixed 且四边为 0（即 top: 0; right: 0; bottom: 0; left: 0），否则 flex 没有作用域
• height: 100% 不够，要写 height: 100vh 或确保父级有明确高度；min-height: 100vh 更安全，防内容撑高后失焦
• align-items: center 和 justify-content: center 缺一不可：前者管垂直，后者管水平；顺序不影响效果，但别漏掉任一
• 子元素 .modal 不需要 margin: auto，也不该设 position: absolute——那会破坏 Flex 的对齐逻辑

响应式宽度与滚动适配的常见坑

模态框在小屏上容易被截断或横向溢出，这不是居中失效，而是尺寸策略没跟上：

• 别写死 width: 500px，改用 width: 90% + max-width: 500px，兼顾窄屏和大屏
• 内容超长时，.modal 要加 overflow-y: auto，但必须限制 max-height: 80vh，否则滚动条会盖住关闭按钮
• 如果模态框内有表单或输入框，iOS Safari 会因软键盘弹出导致视口高度突变，此时仅靠 vh 不够稳定；可监听 resize 事件动态更新高度，或改用 min-height: -webkit-fill-available 作兜底
• 焦点管理常被忽略：打开模态框后，document.activeElement 应移到第一个可聚焦元素；关闭时应回到触发按钮——否则键盘用户会迷失

真正难的不是让模态框“看起来居中”，而是它在各种设备、各种内容长度、各种交互状态下都保持可访问、可滚动、不遮挡、不跳动。Flexbox 提供了干净的起点，但细节全在 overlay 的定位闭环、modal 的尺寸弹性、以及交互状态的同步控制里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！