最稳方案是用 img-fluid + d-flex 容器组合实现图片水平垂直双居中，需父容器设明确高度；纯 img-fluid 仅保证响应式缩放，text-center 只水平居中且对垂直无效。
用 img-fluid + d-flex 容器是最稳妥的组合
纯靠 img-fluid 只能实现宽度自适应和水平居中（靠父容器 text-align: center），但垂直居中必须借助 Flex 布局。Bootstrap 5 的 d-flex、justify-content-center、align-items-center 是最直接解法，兼容性好、代码少、不依赖额外 CSS。
- 父容器必须有明确高度（比如
min-height: 100vh或固定height: 400px），否则align-items-center无法生效 -
img标签本身加class="img-fluid"，确保缩放时不溢出、不失比例 - 避免给
img设width/height行内样式，会破坏响应式行为 - 如果容器是卡片（
card）或模态框（modal），需确认其内部是否有 padding 或 border 干扰居中基准线
遇到“图片被裁切”或“只水平居中”的常见原因
这不是 Bootstrap bug，而是布局前提没满足。典型表现是图片顶着容器顶部、或左右居中但上下贴边——本质是父容器没撑开高度，或 flex 轴方向理解偏差。
- 父容器没有设置
height或min-height：Flex 的align-items: center是按容器可用高度计算的，高度为 0 就没得居中 - 误用
text-center：它只影响行内元素的水平对齐，对垂直方向完全无效 - 嵌套了多余
div且未继承 flex 属性：比如在d-flex容器里又套一层普通div，那层会打断 flex 布局流 - 图片原始尺寸远大于容器，且未设
object-fit: cover或contain：此时即使居中，也可能因裁切显得偏移
需要适配不同屏幕时，优先用 min-vh-100 而非 vh-100
移动端 Safari 和部分 Android 浏览器里，vh 单位会把地址栏高度也算进视口，导致页面底部被截断。Bootstrap 提供的 min-vh-100 更可靠。
-
min-vh-100等价于min-height: 100vh，能兜底最小高度，避免内容塌陷 - 如果要全屏背景图居中，建议用
background-image+bg-center+bg-no-repeat，比img标签更可控 - 对老项目（Bootstrap 4），对应类名是
h-100，但必须确保所有父级都有h-100，否则链路中断
不用 Flex 的替代方案：CSS Grid 一行搞定
如果项目已用 Grid 布局，或想减少 class 数量，直接上 class="d-grid" + place-items-center 更简洁，语义也更清晰。
-
place-items-center是justify-items: center+align-items: center的简写，对单子项容器效果一致 - Grid 方案对父容器高度要求相同，仍需
min-vh-100或显式 height - 注意
d-grid在 Bootstrap 5.2+ 才原生支持；旧版本需手动加display: grid - 如果图片要响应式缩放，依然不能省掉
img-fluid—— Grid 不改变图片自身渲染逻辑
h-100 / min-vh-100。调试时直接在浏览器里检查 computed height，比猜更有效。
