使用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 适配小屏幕
基本上就这些，选择哪种方式取决于你的布局需求。Flexbox 更现代、易维护，绝对定位兼容性更好。