background-position: center center 单独无效，必须与 background-size: cover 组合且容器有明确高度（如 min-height: 100dvh），否则因父容器无高、漏写 cover 或被 bootstrap 工具类覆盖而失效。
background-position: center center 单独写几乎总是无效——真正起作用的是它和 background-size: cover 的组合，且容器必须有明确高度（比如 min-height: 100vh），否则核心内容照样被切。
为什么 background-position: center 没生效
不是 CSS 写错了，而是三类典型干扰：
- 父容器没设高度：
.container或.row默认由内容撑高，背景图渲染区域为 0，center定位点无处锚定 - 漏写
background-size: cover：浏览器默认用auto，图片按原始尺寸铺开，center对定位没实际影响 - 被 Bootstrap 工具类覆盖：
bg-dark、bg-primary等会重置整个background声明，自定义的background-position直接丢弃
background-size: cover + center center 才是安全组合
cover 让图片等比缩放至短边刚好填满容器，长边溢出；center center 把构图中心“钉”在可视区中央，溢出部分均匀分布在上下或左右两侧。
- 别用
background-size: 100% 100%：强制拉伸，人像变形、文字糊成色块 - 别用
background-size: contain：全图可见但留白，违背“不剪裁核心内容”的目标 - 移动端尤其注意：横幅图在竖屏下用
cover+center center很可能切掉人脸——这时该换图，或改用center top把头部“捞”进画面
Bootstrap 容器结构干扰背景定位
把背景加在 <div class="container"> 或 <code><div class="row"> 上，<code>background-position: center center 会失效，不是语法错，而是布局逻辑错：
-
.container有max-width和左右padding，背景只覆盖内容区，不是视觉上的“居中区域” -
.row默认display: flex但没设高度，背景渲染区域为 0 - 正确做法：外层套独立 wrapper，例如
<div class="hero-bg"><div class="container"></div></div>，背景样式写在.hero-bg上 - 务必给 wrapper 加
min-height: 100dvh（比100vh更稳，避开 iOS 地址栏遮挡）
Bootstrap 5.3+ 的 bg-position-center 工具类慎用
这个 class 只在 Bootstrap 5.3 及以上版本存在，5.2 及更早版本里加了也无效——开发者工具里根本看不到 background-position: center 的声明。
- 验证方式：打开浏览器开发者工具，检查元素是否真渲染了
background-position: center - 低版本兼容写法：
.bg-center { background-position: center !important; } - 注意：
bg-*类（如bg-primary）和bg-position-*不叠加，得手动组合或避免混用
最易被忽略的一点：背景图是否“被裁剪”，最终取决于图片原始宽高比与设备视口比的匹配程度。再精准的 center center 也救不了一张超宽横幅图在手机上被砍掉上下三分之一——这时候该换图，而不是调 CSS。
