最直接解法是用 d-flex + justify-content-center + align-items-center，但需父容器设 d-flex 并有明确高度（如 min-vh-100），图片加 img-fluid 即可；高度不确定时改用 absolute + transform 居中并配 object-fit。
用 d-flex + justify-content-center + align-items-center 是最直接解法
Bootstrap 5 内置的 Flex 工具类能一步到位实现双轴居中，但必须满足两个前提：父容器设为 d-flex，且有明确高度基准。只加 text-center 或只加 mx-auto 都不行——前者对垂直无效，后者在 flex 容器里会被 justify-content-center 覆盖。
- 父容器必须显式加
d-flex，否则align-items-center完全不生效 - 高度不能靠内容撑开，得设
min-height: 300px、min-vh-100或height: 100vh（推荐min-vh-100，避免滚动条导致视口计算偏差） - 图片本身加
img-fluid即可，不用额外d-block或mx-auto——flex 子项默认支持对齐控制 - 若父容器是
.col，需确认它没被.row的g-0或自定义 padding 干扰内边距，否则视觉上会“偏上”
父容器高度不确定时，改用 object-fit + absolute 定位
当图片所在容器高度由内容动态决定（比如卡片内嵌图），flex 居中会失效——因为 align-items-center 没有交叉轴参考。这时更适合把图片当背景处理，用 CSS 原生能力强制覆盖式居中。
- 父容器加
position: relative和overflow: hidden - 图片加
position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%) - 必须设
width: 100%和height: 100%，否则transform无作用对象 -
object-fit: cover是关键，不加的话图片会被拉伸变形；若要完整显示留白，改用object-fit: contain
别踩这些常见坑
很多看似合理的写法实际会破坏居中效果，尤其在响应式场景下容易被忽略。
-
center-block在 Bootstrap 4/5 中已移除，继续用等于无效 -
vertical-align: middle对块级图片（如加了d-block或mx-auto的）完全不起作用 - 在 flex 容器里给图片加
my-auto是冗余操作，align-items-center已覆盖该行为 -
img-thumbnail自带padding和border，可能让图片看起来“没居中”，必要时加p-0重置 - 移动端 Safari 可能因图片未设宽高属性而短暂渲染为 0×0，导致居中错位，建议始终写
width和height属性或用aspect-ratio
响应式断点下微调，优先用间距工具类而非改对齐逻辑
某些设备上图片看起来偏左或偏上，往往不是 flex 对齐出问题，而是周围元素的内边距、字体大小或行高变化造成的视觉偏差。这时候不该动 justify-content-center，而该调整留白。
- 小屏下顶部多留空？用
pt-sm-0 pt-md-3这类断点间距类 - 图片和文字之间间隙不一致？检查父容器是否用了
line-height或font-size媒体查询 - Bootstrap 5.3+ 支持
min-height-sm、min-height-md等，比写一堆媒体查询更干净 - 如果用
bg-image替代<img>标签，align-items-center失效——此时必须用background-position: center center和bg-contain/bg-cover
