使用 position: fixed 和 transform 可实现弹窗在视口中精准居中。1. 设置 position: fixed、top: 0、left: 0 使弹窗脱离文档流并固定定位；2. 通过 top: 50%、left: 50% 将元素左上角移至视口中心；3. 利用 transform: translate(-50%, -50%) 反向移动自身宽高的一半，实现中心对齐；4. 添加 z-index 确保层级高于页面其他内容。配合全屏半透明遮罩层效果更佳。该方法无需知道弹窗具体尺寸，兼容性好，适用于各类居中浮层场景。
要在CSS中实现居中弹窗，使用 position 和 transform 是一种高效且兼容性良好的方法。这种方式可以确保弹窗在视口中水平垂直居中，无论屏幕尺寸如何变化。
设置定位使弹窗脱离文档流
将弹窗元素的 position 设置为 fixed，使其相对于浏览器视口固定定位。这样即使页面滚动，弹窗仍保持在屏幕中央。
- 给弹窗添加 position: fixed;
- 设置 top: 0; 和 left: 0; 作为起点
- 使用 z-index 确保弹窗显示在其他内容之上
利用transform精确居中
由于无法提前知道弹窗的宽高，直接使用 margin 或 top/left 百分比会偏移。此时 transform 能根据自身尺寸反向移动50%，实现精准居中。
- 设置 top: 50%; 和 left: 50%; 将元素左上角移到视口中心
- 添加 transform: translate(-50%, -50%); 向左向上回移自身宽高的50%
- 这样元素的中心点就与视口中心对齐
完整CSS示例
以下是一个实用的居中弹窗样式：
立即学习“前端免费学习笔记（深入）”；
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: 400px;
height: 200px;
background: white;
border: 1px solid #ccc;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
配合一个遮罩层使用效果更佳，遮罩层应覆盖整个视口，背景半透明。
基本上就这些，这种方法简单可靠，适用于大多数需要居中的浮层或对话框场景。
