如何使用CSS Flexbox构建一个通用的弹窗（Modal）对齐系统？

display: flex 是 Modal 居中的首选方案，因为 align-items: center 和 justify-content: center 能在未知内容尺寸时稳定居中，且无需计算 transform 或依赖固定高度；传统 position: absolute + top: 50% 在内容超出视口时容易溢出或截断，而 Flex 布局天然支持内容自适应和滚动控制。

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

因为 align-items: center 和 justify-content: center 能在未知内容尺寸时稳定居中，且无需计算 transform 或依赖固定高度。传统 position: absolute + top: 50% 在内容超出视口时容易溢出或截断，而 Flex 布局天然支持内容自适应和滚动控制。

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

常见错误是只给子元素加 Flex，但容器本身没设 display: flex，导致居中失效；或者用 min-height: 100vh 而非 height: 100vh，导致内容少时无法垂直撑满。

• 容器（如 .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 内部，而不是 overlay：添加 overflow-y: auto 到 .modal-content，而非 overlay
• 必要时加 margin: 0 auto 防止水平方向因 Flex 默认拉伸而错位

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

Flex 只管视觉对齐，但可访问性（如 Tab 键循环聚焦）需额外处理。很多人误以为居中后焦点管理自动生效，其实不然 —— Flex 不改变 DOM 顺序或 tabindex 行为。

立即学习“前端免费学习笔记（深入）”；

• 确保 .modal-content 有 tabindex="-1"，并在打开时调用 .focus()
• 使用 focus-trap 库时，它只监听键盘事件并重定向焦点，与 Flex 的 align-items 无冲突，但若内容区域没设 outline 或 focus 样式，用户可能看不出焦点在哪
• 关闭按钮必须可 tab 到，且按 Esc 关闭时，焦点应回到触发弹窗的元素上 —— 这部分和 Flex 无关，但常被忽略

真正麻烦的是嵌套 Modal 或多层遮罩时的 z-index 层级和 pointer-events 控制，Flex 本身不解决这些，得靠 CSS 优先级和 JS 状态协同管理。