使用 position: fixed 配合 top: 50%、left: 50% 与 transform: translate(-50%, -50%) 可精准实现元素在视口中央固定定位，不受滚动影响。
使用 `position: fixed` 配合 `top: 50%`、`left: 50%` 与 `transform: translate(-50%, -50%)` 可精准实现元素在视口中央固定定位，不受滚动影响。
要让 .wrapper 始终严格居中于浏览器视口中央（无论页面是否滚动、内容多长），关键在于脱离文档流后仍保持几何中心对齐。原代码中使用 margin-left/right/top/bottom: 50px 的方式本质是“留白偏移”，不仅无法保证居中，还会因 width/height: 100vw/vh 导致边缘紧贴视口边界（如截图所示的右下粘连问题）。
✅ 正确做法是采用 “中心锚点 + 位移校正” 策略：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bg {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.bg img {
position: fixed;
width: 100%;
height: 100%;
object-fit: cover; /* 推荐替代 background-size: cover（更语义化） */
z-index: -1; /* 确保图片在 wrapper 下方 */
}
.wrapper {
position: fixed;
top: 50%;
left: 50%;
width: calc(100% - 100px); /* 总留白 = 左右各50px → 100px */
height: calc(100% - 100px); /* 同理，上下各50px */
transform: translate(-50%, -50%); /* 关键：以自身中心为基准反向偏移 */
background-color: #38323283;
border-radius: 45px;
box-shadow:
3px 3px 4px rgba(0, 0, 0, 0.25),
-3px -3px 4px rgba(0, 0, 0, 0.25);
}? 为什么这样更可靠？
-
top: 50%; left: 50%将元素左上角定位到视口中心； -
transform: translate(-50%, -50%)将元素自身宽高的一半反向位移，使元素中心与视口中心重合； -
calc(100% - 100px)精确控制内边距（避免margin在fixed下失效或引发布局错乱）； - 移除所有
margin声明，因其在position: fixed元素上对居中无实质贡献，反而干扰计算。
⚠️ 注意事项：
- 若
.bg仅作容器用途，建议移除其display: flex（因内部元素已fixed，无需依赖 Flex 对齐）； - 图片需加
z-index: -1，防止遮挡.wrapper； - 使用
object-fit: cover替代background-size: cover更符合<img alt="如何让固定定位的容器始终居中显示（即使页面滚动）" >语义，且兼容性良好（IE9+）； - 如需响应式缩放，可将
calc()中的100px替换为clamp(40px, 5vw, 80px)实现自适应留白。
最终效果：.wrapper 将像悬浮窗一样稳定居中于屏幕中央，滚动页面时位置恒定不变，完美匹配 Figma 设计稿预期。
