background-position: center center 必须与 background-size: cover 配合且容器需有明确高度才能确保核心内容居中不被剪裁，否则因父容器无高度、漏写 cover 或 Bootstrap 工具类覆盖等原因失效。
background-position: center center 是保证核心内容不被剪裁的起点，但单写它几乎总是失效——真正起作用的是它和 background-size: cover 的组合，以及容器是否有明确高度。
为什么 background-position: center 没生效
常见现象：图片明明写了 background-position: center，但人像/Logo 还是被切掉一半。根本原因不是 CSS 写错了，而是：
- 父容器没设
min-height（比如.container默认高度由内容撑开，背景图无处可居中） - 只写了
background-position，却漏了background-size: cover—— 浏览器默认用auto，图片按原始尺寸铺，center定位点根本没意义 - 用了 Bootstrap 的
bg-dark、bg-primary等工具类，它们会覆盖自定义背景声明，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"> 或 <div class="row"> 上，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: 100vh（或100dvh避免 iOS 地址栏遮挡）
Bootstrap 5.3+ 的 bg-position-center 工具类慎用
这个 class 只在 Bootstrap 5.3 及以上版本存在，5.2 及更早版本里加了也无效——浏览器开发者工具里根本看不到 background-position: center 的声明。
- 验证方式：打开 DevTools → Elements 面板 → 找到元素 → 查看 Computed 样式里是否有
background-position: center center - 低版本兼容写法：
.bg-center { background-position: center center !important; }，再配合自定义background-size - 注意：Bootstrap 的
bg-*类和bg-position-*不叠加，不能写class="bg-dark bg-position-center"，得手动合并样式
真正难的不是写对那几行 CSS，而是理解 cover 必然裁剪、center center 只是控制裁哪——如果图本身构图偏上，再怎么调 CSS 也救不回被切掉的下巴。这时候该换图，而不是堆 hack。
