使用 transform: translate(-50%, -50%) 可解决 fixed 定位下百分比居中时因元素尺寸导致的偏移问题，使模态框真正居中；或采用 flexbox 布局通过 align-items 和 justify-content 实现更简洁的居中方案。
模态框定位不准确时，使用 position: fixed 结合 top 和 left 百分比可以实现居中定位，但容易因元素自身尺寸未抵消而导致偏移。关键在于正确处理位移补偿。
问题原因：百分比基于视口，未考虑元素尺寸
当设置top: 50% 和 left: 50% 时，元素的左上角会定位在视口中心，而不是元素自身居中。这会让模态框看起来偏右下方。
解决方案：配合 transform 偏移修正
通过transform: translate(-50%, -50%) 将元素向左上方拉回自身宽高的一半，实现真正居中。
CSS 示例：
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
z-index: 1000;
}
-
position: fixed确保相对于视口定位，不受滚动影响 -
top: 50%和left: 50%将元素起点放在视口中心 -
transform: translate(-50%, -50%)把元素整体回拉一半尺寸，完成居中
替代方案：使用 flexbox 更简洁
若兼容性允许，推荐用 flex 布局简化居中逻辑：
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal {
width: 400px;
height: 300px;
}
- 父容器全屏覆盖，flex 居中子元素
- 无需计算偏移，结构清晰，响应式友好
transform 补偿是 fixed + 百分比定位的核心技巧，不复杂但容易忽略。 
