使用Flexbox或绝对定位+transform可实现弹窗居中。1. Flexbox：父容器设为flex，用justify-content和align-items居中，无需知悉子元素尺寸；2. 绝对定位：元素top和left设50%，再用transform位移-50%实现精准居中。推荐使用Flexbox，更简洁现代，兼容性需求高时选绝对定位。
要让弹窗在页面中居中显示，最常用的方法是使用 CSS 的 Flexbox 或 绝对定位 + transform。下面介绍两种实用且兼容性良好的实现方式。
方法一：使用 Flexbox（推荐）
通过将父容器设置为 Flex 布局，可以轻松实现水平和垂直居中。
示例代码：.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
}
说明：外层容器覆盖整个视口，利用 justify-content 和 align-items 实现居中，无需知道弹窗具体尺寸。
方法二：绝对定位 + transform
适用于不使用 Flex 的场景，通过定位和位移居中。
立即学习“前端免费学习笔记（深入）”；
示例代码：.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
}
说明：先将元素的左上角定位到页面中心，再用 transform 反向移动自身宽高的 50%，实现精准居中。
补充建议
- 弹窗外层建议加 fixed 定位，避免滚动时偏移
- 背景遮罩层可使用半透明黑色提升视觉层次
- 加上 z-index 确保弹窗在最上层显示
- 移动端注意设置 max-width 适配小屏幕
