用 position: fixed 居中模态框必须配合 transform: translate(-50%, -50%)，因 top: 50% 和 left: 50% 仅定位元素左上角到屏幕中心，translate 才使其整体中心对齐；该方案兼容未知宽高，但祖先元素含 transform 等属性会导致 fixed 失效。
用 position: fixed 居中模态框的核心要点
只设 top: 50% 和 left: 50% 不行，元素左上角会落在屏幕中心，不是整体居中。必须配合 transform: translate(-50%, -50%) 把自身回拉一半宽高。
transform: translate(-50%, -50%) 为什么不能省
这是最关键的一步。浏览器计算 top: 50% 是从元素**上边缘**开始量，left: 50% 是从**左边缘**开始量。不加 translate，模态框会偏右下——它的中心点实际在屏幕右下四分之一处。
-
translate(-50%, -50%)中的百分比是相对于元素自身的宽高，不是视口 - 如果模态框宽高未知（比如内容动态），这个方案依然可靠；不用 JS 测量尺寸
- 注意：该
transform会触发新层叠上下文，可能影响z-index层级逻辑
完整可用的 CSS 写法
以下是最小可靠配置，含必要重置和防滚动穿透：
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
border: none;
background: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1050;
}
/ 可选：防止背景滚动 /
body.modal-open {
overflow: hidden;
}
容易被忽略的兼容性和边界问题
看似简单，但几个细节常导致失效：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
transform、perspective或filter时，fixed会退化为相对定位（变成 relative to nearest transformed ancestor） - 移动端 Safari 对
transform+fixed组合偶有渲染抖动，可加will-change: transform缓解 - 如果模态框内容超出视口高度，又没设
max-height和overflow-y: auto，会出现不可滚动的截断 -
translate(-50%, -50%)在 IE10+ 支持良好，但 IE9 及更早需回退到 JS 计算偏移
真正麻烦的从来不是写这四行 CSS，而是它嵌在复杂布局里时，谁悄悄给祖先加了 transform。
