最可靠方案是d-flex + align-items-center组合，需父容器设明确高度且为Flex上下文；text-center仅水平居中，单独使用无法实现垂直居中。
用 text-center 和 d-flex + align-items-center 组合最可靠
bootstrap 4/5 中，col 默认是 display: block，不提供内置的垂直居中能力。单纯加 text-center 只能水平居中，图片依然贴顶。真正起效的是把列变成 flex 容器。
实操建议：
-
col上同时添加d-flex、justify-content-center（水平）、align-items-center（垂直） - 确保图片有明确高度（比如设
height: 200px）或父容器有固定高；否则align-items-center会因“无高度可居中”而失效 - 如果图片是响应式（
img-fluid），记得给父col加min-height或height，避免塌陷
为什么不用 my-auto？
my-auto 在 Flex 父容器里才有效，单独加在 col 上没用——因为 col 默认不是 Flex。常见错误是只写：<div class="col my-auto"><img></div>，结果毫无反应。
正确用法必须满足两个条件：
- 父容器（比如
row）或该col自身是d-flex -
my-auto加在图片自身上（不是加在col上）
示例：<div class="col d-flex"><img src="..." class="my-auto"></div>
Bootstrap 5.3+ 可用 object-fit 配合居中容器
当需要图片“填满且居中裁剪”（类似背景图效果），仅靠 Flex 居中不够。这时要结合 CSS 的 object-fit: cover 和固定宽高容器。
关键点：
- 给
col设固定尺寸（如width: 300px; height: 200px;）并加d-flex justify-content-center align-items-center - 给
img加width: 100%; height: 100%; object-fit: cover; - 避免同时用
img-fluid——它会强制max-width: 100%，和width: 100%冲突
常见坑：图片撑开 col 导致布局错乱
默认图片是 inline 元素，底部有空白间隙（baseline 对齐导致），会让 col 高度略大于图片本身，Flex 居中看起来偏下。
解决方法（任选其一）：
- 给
img加vertical-align: middle或top - 给
img加align-self-center（在 Flex 容器内更精准） - 直接设
img { display: block; }消除 inline 间隙
这个间隙问题在小尺寸图片或带边框时特别明显，但很多人排查半天才发现是 baseline 作祟。
