bootstrap 不提供 background-position 工具类，需用原生 css 或自定义 .bg-center 类（background-position: center center !important）实现背景居中，且必须配合 background-image 和显式高度控制。
Bootstrap 中 background-image 的位置控制依赖 CSS，不是 Bootstrap 自带类
Bootstrap 本身不提供 background-position 的专用工具类（比如没有 bg-center 这种类），想让图片背景居中，得靠原生 CSS 属性或自定义类。官方只提供了 bg-primary、bg-opacity-10 这类语义化背景色类，不处理定位逻辑。
用 bg-center 自定义类最直接（推荐）
在你的 CSS 文件或 <style></style> 块里加一行：
.bg-center {
background-position: center center !important;
}
然后在元素上同时用 Bootstrap 的背景图类和这个自定义类：
<div class="bg-image bg-center" style="background-image: url('photo.jpg'); height: 400px;"></div>
-
background-position: center center等价于50% 50%，横纵都居中 - 加
!important是为了覆盖 Bootstrap 可能存在的其他 background-position 设置（比如某些组件重置了该属性） - 必须配合
background-image和尺寸控制（如height或min-height），否则 div 默认高度为 0，看不见背景
如果不想写 CSS，用内联 style 更快但难复用
适合临时调试或单页小改动：
<div class="bg-image" style="background-image: url('photo.jpg'); background-position: center; height: 400px;"></div>
-
background-position: center是简写，等效于center center - 注意：Bootstrap 的
bg-image类仅设置background-size: cover和background-repeat: no-repeat，不设 position，所以必须自己补 - 别漏掉
background-size控制——如果想拉伸填满又不失真，用cover；如果想完整显示不裁剪，用contain
常见失效原因：父容器没高度 or 图片路径错
即使写了 background-position: center，也可能看不到效果，通常卡在这两个点：
- 父元素高度为
auto，且内部无内容，导致实际高度是 0 —— 加height、min-height或aspect-ratio -
background-image: url(...)路径错误或跨域限制，浏览器控制台报Failed to load resource—— 用开发者工具的 Network 标签确认图片是否成功加载 - 用了
background-attachment: fixed后，center表现可能和预期不同（尤其滚动时），这时要测试是否真需要固定背景
居中这事看着简单，但真正跑起来总卡在尺寸、路径、继承这几个地方，调的时候先看控制台有没有 404，再查 computed styles 里 background-position 是否真生效，比反复改 class 有效得多。
