最可靠方案是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”，而在于父容器的定位和尺寸控制是否闭环：
- 外层
.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 的尺寸弹性、以及交互状态的同步控制里。
