最稳的全屏背景图居中写法是background-position: 50% 50%，等价于center center，需配合no-repeat并确保多背景时值一一对应。
background-position: 50% 50% 是最稳的居中写法
全屏背景图要焦点居中，直接写 background-position: 50% 50% 就行，等价于 center center。它让图片自身中心点和容器内容区中心点对齐——这是浏览器原生行为，不依赖 JS，也不受缩放干扰。
别写成 50 50（缺单位）或 "50% 50%"（加引号），CSS 解析器会直接忽略整条声明。
- 如果只写一个值，比如
background-position: 50%，第二个值默认是50%，效果一样 - 用
center关键字更易读，但底层仍是转为50% 50%计算，两者无性能差异 - 若容器有 padding 或 border，确保
background-origin没被意外改成padding-box或border-box，否则“居中”基准会偏移
background-size: cover 时，50% 50% 仍有效，但含义变了
当设了 background-size: cover，图片会被等比缩放填满容器，实际渲染尺寸往往和原图不同。此时 50% 50% 对齐的是“缩放后图片的中心”，不是原图中心——这点容易被忽略，但通常不影响视觉居中效果。
真正出问题的是用像素值定位，比如 background-position: 100px 100px：缩放后图片左上角坐标已变，固定像素偏移会导致焦点明显偏移。
- 优先用
cover+50% 50%或center，组合最可靠 - 避免混用
cover和像素定位，尤其在响应式场景下 - 如果必须微调（比如人物脸部偏右），改用百分比微调：
background-position: 45% 50%，比像素值更健壮
全屏背景常见错位原因：background-repeat 和 background-attachment
写了 50% 50% 却没看到居中？大概率是 background-repeat 没关掉。默认值是 repeat，图片平铺后，所有副本都从同一位置开始，位移被掩盖。
另外，background-attachment: fixed 在部分旧版 Firefox 中需配合 background-position 才能生效，但现代浏览器已无此限制；不过若用了 fixed，要注意滚动时焦点是否随视口“锁死”——这本身不是 bug，而是设计意图。
- 必须加
background-repeat: no-repeat，否则定位无效 -
background-attachment: fixed不影响background-position的计算逻辑，但会让定位参考系变成视口而非元素自身 - 移动端 Safari 对
fixed背景支持不稳定，建议用 JS 检测并 fallback 到scroll
多背景图下，每个 background-position 必须严格一一对应
全屏页常叠加渐变蒙层或装饰图案，用逗号写多个背景时，background-position 值也得按相同顺序、数量、逗号分隔。漏一个、多一个、顺序错，整条 CSS 规则可能被浏览器静默丢弃。
例如：background-image: url(bg.jpg), linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3));，那么 background-position 就得写成 50% 50%, center，不能少第二项，也不能写反。
- 调试时打开开发者工具，悬停在
background-position上，能看到每个背景图的实时预览框 - 关键字和百分比可混用，如
left 20%, center，但必须保证每项都明确对应一个背景 - 如果某层背景不需要定位（比如纯色渐变），显式写
0 0或center，别留空
全屏背景的“焦点居中”本质是控制参考点对齐，而不是强制裁剪。最容易被忽略的是 background-repeat: no-repeat 这一行，以及多背景时值的数量匹配——这两处一错，其他所有精调都白做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
