Bootstrap中Card图片垂直居中默认不生效，因.card-img-top等为块级元素且.card非Flex容器；需用d-flex+align-items-center在图片外层创建Flex环境，或对.card-img-top用top:50%+transform:translateY(-50%)微调。
Card里图片垂直居中为什么默认不生效
因为 Bootstrap 的 .card-img-top 和 .card-img-bottom 是块级元素，靠 margin 或 padding 模拟居中容易被内容撑开；而直接给 .card-img 加 align-items: center 也没用——它不在 Flex 容器里，父元素 .card 默认是普通块流布局。
用 d-flex + align-items-center 强制创建垂直居中环境
最稳妥的做法是把图片容器（比如 .card-body 或自定义的包裹层）设为 Flex，并启用垂直居中。注意不能直接在 .card 上加 d-flex，否则整个卡片结构会被破坏（标题、文本、按钮都会横向排列）。
推荐做法：
- 给图片外层加一个
<div class="d-flex align-items-center justify-content-center h-100"> - 图片本身设
max-height: 100%; object-fit: contain;防止拉伸变形 - 确保该 div 有明确高度，例如配合
h-100或固定像素值
示例结构：
<div class="card" style="height: 300px;">
<div class="card-body d-flex align-items-center justify-content-center h-100">
<img src="logo.png" class="img-fluid" style="max-height: 180px; object-fit: contain;">
</div>
</div>
如果必须用 card-img-top，怎么微调垂直位置
.card-img-top 是绝对定位在卡片顶部的，没法直接居中。但可以通过以下方式“视觉上”逼近居中：
- 给
.card设position: relative; - 给
.card-img-top加top: 50%; transform: translateY(-50%); - 同时移除默认的
margin-bottom（否则会和.card-body叠加出额外间距）
注意：这种写法会脱离文档流，.card-body 会顶到卡片顶部，需手动给它加 margin-top 补偿图片高度。
响应式下图片居中失效的常见原因
在小屏幕上，h-100 可能失效，因为父容器高度没撑开；或者 object-fit 不被旧版 Safari 支持，导致图片溢出。
- 避免只依赖
h-100，可配合min-height: 200px等兜底 - 需要兼容 iOS background-image +
background-position: center替代<img> - 用
aspect-ratio控制容器比例（如style="aspect-ratio: 4/3;"），比单纯设高更稳定
真正麻烦的是混合了文字+图片+按钮的复杂 Card，这时候垂直居中得按内容区域切分，而不是试图让整张图在卡片里“绝对居中”。
