背景图片居中最直接的方法是使用 background-position: center center；需配合 background-size（推荐 cover）和容器 min-height: 100vh，避免仅用 center 或依赖 Bootstrap 工具类。
背景图片居中用 background-position 最直接
bootstrap 本身不提供专门控制背景图居中的工具类，这事得靠原生 css。核心就是设置 background-position: center center，它等价于 background-position: 50% 50%，水平和垂直都落在中间点上。
常见错误是只写 background-position: center——这其实只设了水平方向，垂直方向默认是 top，结果图片被压在顶部；必须写双值或用 center center 才真正居中。
-
background-position: center center是最稳妥、兼容性最好的写法（IE9+ 都支持） - 别依赖 Bootstrap 的
text-center或mx-auto，它们对背景图完全无效 - 如果容器高度不固定（比如内容撑开），记得同时设
min-height: 100vh或明确高度，否则“垂直居中”没参照系
配合 background-size 防止拉伸或裁切失真
光居中还不够，图片可能被拉宽、压扁，或者只显示一小块——这是 background-size 没配好。
常用组合有三个：
-
background-size: cover：等比缩放填满容器，可能裁边。适合封面图、视觉优先场景 -
background-size: contain：等比缩放完整显示全图，可能留白。适合 Logo、示意图 -
background-size: 100% 100%：强制拉伸铺满，会变形。一般应避免
推荐搭配使用：background-position: center center; background-size: cover;
在 Bootstrap 容器里加背景图，别忘了高度控制
很多人把背景图加在 <div class="container"> 上，结果图没显示或只居中了一半——因为 <code>.container 默认高度由内容决定，没内容就几乎为 0。
解决办法不是给 .container 加 height: 100vh（它会破坏响应式流体布局），而是：
- 用一个独立的
<div> 包裹，加 <code>min-height: 100vh和背景样式 - 或者套在
<section class="d-flex justify-content-center align-items-center"></section>里，再设min-height: 100vh - 避免把背景图直接加在
.row或.col上，它们是网格辅助类，语义和尺寸都不适合做背景容器 - 优先去掉
fixed，改用 JS 滚动监听模拟，或接受纯 CSS 的局限性 - 如果必须用
fixed，加上background-origin: border-box和background-clip: border-box稍微改善兼容性 - 测试时一定要真机打开，模拟器常掩盖这个问题
移动端要注意 background-attachment 引发的错位
如果用了 background-attachment: fixed（实现视差效果），在 iOS Safari 和部分安卓浏览器里，background-position: center center 可能失效，图片偏移或抖动。
这不是 Bootstrap 的锅，是浏览器渲染机制问题。真实项目中：
background-position）、缩放（background-size）、容器高度（min-height）。少一个，就容易在某个设备上“看起来没居中”。
