CSS Flexbox实现通用弹窗对齐系统指南

说一个前端开发中反复踩坑的话题：Modal（弹窗）居中。 为什么 display: flex 最终成了 Modal 居中的“标配”？这里面其实有两层逻辑。 从实际效果来看，align-items: center 和 justify-content: center 这对组合，能在内容尺寸不确定的情况下稳稳当当居中——不需要手动计算 transform 偏移量，也不用写死高度。反观传统方案，position: absolute 搭配 top: 50%，一旦内容超出视口，轻则溢出，重则直接截断，体验很糟糕。而 Flex 布局天然支持内容的自适应，滚动控制也跟得上，这才是它真正“称王”的原因。 但注意一个细节：很多人的居中方案失效，是因为只给子元素加了 Flex，容器本身却没设 display: flex。还有的人是用了 min-height: 100vh 而不是 height: 100vh，导致内容少的时候，遮罩层撑不满屏幕，整个布局就崩了。

为什么 display: flex 是 Modal 居中的首选方案

因为 align-items: center 和 justify-content: center 在内容尺寸未知时能做到稳定居中，而且不需要依赖 transform 的计算或固定高度。传统方案用 position: absolute 加 top: 50%，内容一超出视口就容易溢出或截断，Flex 却天然支持内容自适应和滚动控制，这正是它的优势所在。

Modal 容器必须设为 display: flex 且全屏覆盖

关键一步：容器类（比如 .modal-overlay）需要同时设置 display: flex、align-items: center、justify-content: center、position: fixed、inset: 0、z-index: 1000。很多人习惯用 top: 0; left: 0; width: 100%; height: 100%，但 inset: 0 写法更简洁，而且兼容性不错（Chrome 58+/Firefox 55+/Safari 14.1+）。如果担心旧版 Safari，可以回退到 top: 0; right: 0; bottom: 0; left: 0。

内容区域（.modal-content）要限制宽度并允许内部滚动

不加约束的话，Flex 会让内容区域横向拉伸到填满整个视口，小屏上体验非常糟糕。而且千万不能让整个遮罩层（overlay）滚动，否则背景内容会跟着一起动，这显然不是想要的效果。 正确的做法是：给 .modal-content 设置 max-width: 90vw 和 max-height: 90vh，避免贴边和溢出。滚动事件应限制在内容区域内部——在 .modal-content 上加 overflow-y: auto，而不是 overlay。必要时还可以加个 margin: 0 auto，防止水平方向因为 Flex 默认拉伸而出错。

键盘焦点与 focus-trap 不影响 Flex 布局逻辑

Flex 只管视觉对齐，可访问性（比如 Tab 键循环聚焦）需要单独处理。很多人以为居中后焦点管理就自动生效了，其实不然——Flex 不会改变 DOM 顺序或 tabindex 行为。 具体来说：确保 .modal-content 有 tabindex="-1"，打开时调用 .focus()。使用 focus-trap 库时，它只监听键盘事件并重定向焦点，与 Flex 的 align-items 没有冲突。但如果内容区域没设 outline 或焦点样式，用户可能完全找不到焦点在哪儿。 关闭按钮必须可以通过 Tab 键访问，而且按 Esc 关闭时，焦点要回到触发弹窗的元素上——这部分虽然和 Flex 无关，但几乎是所有实现里最容易忽略的坑。 真正棘手的是嵌套 Modal 或多层遮罩时的 z-index 层级和 pointer-events 控制。Flex 本身不解决这些，得靠 CSS 优先级和 JS 状态协同处理。