要使图片在Card内水平垂直居中且不拉伸变形，需用Flex容器（如d-flex justify-content-center align-items-center h-100）包裹图片，卡片设显式高度，图片设max-width:100%; max-height:100%; object-fit:contain。
图片在Card里水平垂直居中但不拉伸变形
直接给 <img> 加 mx-auto d-block 只能水平居中，垂直方向没效果；而用 card-img-top 会固定在顶部，根本不是居中。真正要同时满足「居中 + 不溢出 + 不变形」，得控制容器布局 + 图片渲染行为。
- 必须用 Flex 容器包裹图片（比如
<div class="d-flex justify-content-center align-items-center h-100">），否则align-items-center没作用 - 容器需有明确高度（
h-100有效前提是父级.card本身设了高度，比如style="height: 240px;"） - 图片加
max-width: 100%和max-height: 100%，再配object-fit: contain—— 这样既保持宽高比，又不会撑破容器 - 别用
img-fluid单独撑开：它只响应宽度，高度失控时仍会溢出
为什么 card-img-top 不能直接居中
card-img-top 是 Bootstrap 内置的绝对定位类，它把图片钉死在卡片顶部，且默认没有高度约束。你加 align-items-center 到 .card 上完全无效，因为 .card 不是 Flex 容器，而且 card-img-top 已脱离文档流。
- 强行给
.card-img-top加top: 50%; transform: translateY(-50%)能“视觉居中”，但会覆盖.card-body，必须手动给.card-body补margin-top - 这种写法在响应式下极易错位——比如小屏时图片高度变小，
transform的偏移量就不准了 - 更麻烦的是：一旦卡片内容动态变化（比如文字增多导致
.card-body高度变大），图片位置就全乱
避免常见踩坑的三个硬性条件
很多人的代码看着对，但图片还是跑偏或溢出，问题几乎都出在这三处：
-
.card必须有显式高度（h-100不够，得配合vh-100或内联style="height: 300px;"），否则子容器h-100计算结果为 0 - 不要把
d-flex直接加到.card上——它会破坏卡片内部结构（标题、文本、按钮全变成横向排列） - 别在图片上同时用
img-fluid和object-fit：前者重置max-width，后者依赖max-height，两者冲突，优先用max-width: 100%; max-height: 100%; object-fit: contain;
完整可用示例（复制即用）
下面这段 HTML 可以直接放进 Bootstrap 5 项目，无需额外 CSS：
<div class="card" style="height: 280px;">
<div class="card-body d-flex justify-content-center align-items-center h-100">
<img src="logo.png"
class="d-block"
style="max-width: 100%; max-height: 100%; object-fit: contain;">
</div>
</div>
注意：如果卡片内容区需要留白（比如上下各 20px），就把 h-100 换成 min-vh-100 并配合 py-5，否则图片会顶到边缘。
