最稳方案是用 img-fluid + d-flex 容器组合实现图片居中，需父容器设明确高度；纯 img-fluid 只保证响应式缩放，不居中；text-center 仅水平居中且对垂直无效；mx-auto 在 flex 容器中失效。
用 img-fluid + d-flex 容器是最稳妥的组合
纯靠 img-fluid 只能保证图片等比缩放并填满父容器宽度，但不会居中；必须配合弹性布局容器才能同时控制水平和垂直对齐。Bootstrap 5 的 d-flex、justify-content-center 和 align-items-center 是直接解法，且不依赖图片宽高固定。
常见错误是只加 text-center——它只管水平居中，对垂直方向完全无效；或者给图片设 margin: auto，但在非 flex 容器里无法触发垂直居中。
- 父容器必须设明确高度（比如
min-height: 300px或height: 100vh），否则align-items-center没有参考基准 - 图片本身要加
img-fluid，否则在小屏下可能溢出或失真 - 避免同时用
mx-auto和justify-content-center，冗余且可能冲突
如果容器高度不确定，改用 object-fit + position 方案
当父容器高度由内容撑开（比如卡片内嵌图），flex 居中会失效。这时更适合用 CSS 的 object-fit: cover 配合绝对定位，让图片“覆盖式居中”。
这个方案本质是把图片当背景处理：保持宽高比、裁剪多余部分、强制中心对齐。适合 banner、头像、卡片封面等场景。
- 父容器需设
position: relative - 图片加
position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%) - 必须显式设
width: 100%和height: 100%，否则transform无效果 -
object-fit: cover是关键，不用它的话图片会被拉伸变形
警惕 center-block 这种过时写法
Bootstrap 3 里的 center-block 类在 Bootstrap 4/5 中已被移除，继续使用会导致样式不生效。有人试图用 mx-auto d-block 替代，但这只解决水平居中，垂直方向依然悬空。
更隐蔽的问题是：在 flex 容器里给图片加 d-block 其实多余，因为 img 默认就是 inline 元素，而 flex 项天然支持对齐控制，无需额外转块级。
- 别从老项目文档里直接抄
center-block -
mx-auto在非 flex 父容器中才有效，在d-flex里会被justify-content覆盖 - 如果用了
img-thumbnail，注意它自带padding和border，可能干扰视觉居中，必要时重置padding: 0
响应式断点下需要微调？优先用 Bootstrap 的间距工具类
某些设备上图片看起来偏上或偏左，往往不是对齐逻辑问题，而是容器内边距、字体大小或行高变化导致的视觉偏差。这时候不该改 flex 属性，而该调整周围留白。
比如在小屏下顶部多留点空隙，就用 pt-md-0 pt-3；想让图片在中屏更紧凑，加 my-lg-4 my-2。这些类比手写媒体查询更轻量、更一致。
- 避免为居中写自定义 media query，破坏响应式体系一致性
- 如果图片下方有文字，用
mb-0或mb-2控制间隙，比调align-items更可控 -
vh单位在移动端 Safari 上可能有视口计算误差，优先用min-vh-100这类 Bootstrap 内置类
height: 100%。
