全屏背景图真正居中且不平铺，必须同时满足：background-position: 50% 50%（或center center）、background-repeat: no-repeat、html和body高度设为100%并清除默认边距，缺一不可；否则平铺会掩盖定位效果，或因容器未撑满视口导致仅覆盖内容区。
全屏背景图要真正居中且不平铺，background-position: 50% 50% 必须配合 background-repeat: no-repeat，否则平铺会掩盖定位效果——这是最常被忽略的组合错误。
为什么写了 center 却没居中？
常见现象是背景图看起来“偏左”或“偏上”，实际不是定位失效，而是：background-repeat 默认为 repeat，图片被无限复制，所有副本都从同一位置开始，视觉上根本看不出单张图是否居中。
- 必须显式写
background-repeat: no-repeat，缺一不可 - 如果用了
background-attachment: fixed，定位参考系变成视口，但50% 50%依然有效，无需额外调整 -
background-origin若被意外设为padding-box或border-box，会导致“居中”基准偏移，保持默认border-box即可（现代浏览器默认值）
cover 模式下 background-position 还有效吗？
有效，但含义变了：当 background-size: cover 生效时，图片已被等比缩放，50% 50% 对齐的是“缩放后图像的中心”，不是原图中心。这通常不影响视觉效果，但要注意：
- 别混用
cover和像素定位（如background-position: 100px 100px），缩放后坐标已失准 - 微调推荐用百分比，比如人物脸偏右，改
background-position: 45% 50%，比像素值更健壮 -
center center和50% 50%底层一致，无性能差异，选易读的即可
全屏生效的前提：html 和 body 高度必须撑满视口
背景设在 body 上却只铺满内容区？大概率是 html 和 body 没给高度。浏览器默认 body 高度由内容决定，不会自动占满屏幕。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置
html { height: 100%; }和body { height: 100%; margin: 0; padding: 0; } - 若结构复杂（如含固定头部），建议另建全屏容器：
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; - 用
min-height: 100vh可作为兜底，但vh在移动端某些场景下有兼容性波动，height: 100%更稳
最容易被绕开的细节是：背景图路径、no-repeat、50% 50%、父容器高度这四者必须同时到位，漏掉任意一个，居中就只是“看起来像”。
