使用 position: fixed 结合 Flex 布局可实现模态框居中，通过 .modal-overlay 设置固定定位与 flex 对齐，.modal-content 定义样式，HTML 结构嵌套内外层，JavaScript 控制显示隐藏，兼顾兼容性与响应式。
模态框居中是前端开发中的常见需求。使用 position: fixed 结合 Flex 布局的对齐属性，可以轻松实现无论页面滚动与否都精准居中的效果。下面通过一个实践案例说明具体实现方式。
1. 使用 position: fixed 固定模态框位置
将模态框容器设置为固定定位，使其脱离文档流并相对于视口定位，不受页面滚动影响。
关键代码：- 设置 position: fixed
- 定位四边为 0（即 top: 0; right: 0; bottom: 0; left: 0;
- 这为后续 Flex 居中提供布局基础
2. 父容器使用 Flex 实现垂直水平居中
在 fixed 定位的基础上，启用 Flex 布局并通过 align-items 和 justify-content 实现内容居中。
CSS 示例：.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
- align-items: center 垂直居中子元素
- justify-content: center 水平居中子元素
- 背景层覆盖整个视口，点击可关闭模态框
3. 模态框内容区域样式设计
居中的是模态框本身，需为其设置合适的宽高和视觉样式。
立即学习“前端免费学习笔记（深入）”；
示例代码：.modal-content {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
- 限制最大宽度和高度，适配移动端
- 添加圆角、阴影提升视觉层次
- 允许内容溢出时内部滚动
4. HTML 结构与使用方式
结合上述样式，构建完整结构。
<div class="modal-overlay">
<div class="modal-content">
<h3>提示信息</h3>
<p>这是模态框的内容部分。</p>
</div>
</div>
- 外层 overlay 控制显示/隐藏（可通过 JavaScript 切换类名）
- 点击 overlay 背景可关闭，内容区阻止事件冒泡
基本上就这些。这种组合方式兼容性好，代码简洁，适合大多数项目场景。关键是理解 fixed 提供定位基准，Flex 提供对齐能力，两者配合自然实现完美居中。不复杂但容易忽略细节，比如 z-index 和 overflow 处理。
