应使用 background-position: 50% 50% 配合 min-height: 100vh 和 background-repeat: no-repeat 实现全屏居中背景图，而非 position: absolute；后者仅定位容器而非背景图，且需注意多背景参数顺序及 background-origin 设置。
别用 position: absolute 实现全屏背景图——它根本不管 background-image 的定位，只会让你多写一堆无效代码。
为什么 position: absolute 对背景图无效
绝对定位控制的是元素盒子的位置，不是背景图。你给 body 或 div 加 position: absolute，只是把整个容器“挪走”，但 background-image 依然按默认规则（0% 0%）从左上角开始铺，和 position 毫无关系。
- 常见错误现象：写了
top: 0; left: 0; width: 100%; height: 100vh;，结果背景还是偏左上、没居中 - 真正起作用的只有
background-position、background-size和background-repeat - 如果硬要用
absolute，那目标必须是<img>标签，而不是背景图——这属于 DOM 元素居中，不是背景定位
background-position: 50% 50% 才是真正的“绝对定位”逻辑
浏览器原生的背景定位就是基于百分比坐标系的“绝对定位”：0% 是容器左/上边缘，100% 是右/下边缘，50% 就是正中心。它不依赖 JS，不随缩放漂移，兼容所有现代浏览器。
- 必须配
background-repeat: no-repeat，否则平铺时所有副本都从同一位置开始，看不出居中效果 -
background-position: center center等价于50% 50%，但推荐写百分比——避免某些旧版工具解析关键字失败 - 别写成
background-position: 50 50（缺单位）或"50% 50%"（加引号），CSS 解析器会直接忽略整条声明 - 如果容器有
padding，确认background-origin是border-box还是content-box；默认是padding-box，可能让“50%”基准偏移
全屏背景高度必须用 min-height: 100vh
写 height: 100vh 看似直接，但内容超长时会截断页面，滚动条消失；而 min-height: 100vh 保证至少一屏高，又能自然撑开。
立即学习“前端免费学习笔记（深入）”；
- 不要用
height: 100%，它依赖父元素高度，html和body若没设高，就会失效 - 移动端 Safari 中
100vh可能包含地址栏高度，导致背景溢出；min-height更稳 - 若需视差滚动，
background-attachment: fixed要慎用：iOS Safari 卡顿、焦点随地址栏跳变，建议 JS 检测后 fallback 到scroll
多背景图时 background-position 必须一一对应
比如叠加渐变蒙层：background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(bg.jpg);，那么 background-position 必须写成 center, 50% 50%——第一个值对应渐变（无实际位置意义，但语法需占位），第二个对应图片。
- 漏一个值、多一个逗号、顺序错乱，都会导致整个背景渲染异常
- 所有背景图的
background-size、background-repeat也得按相同顺序配对 - 用
cover时，50% 50%对齐的是缩放后的图像中心，不是原图中心——这点常被忽略，但通常不影响视觉效果
真正容易被忽略的，是背景容器的尺寸约束和多背景的参数对齐。写对 background-position 只是第一步，后续所有行为都建立在 min-height、no-repeat 和逗号分隔的参数顺序之上。
