最稳方案是用 d-flex + align-items-center 实现容器级垂直居中，需父容器设明确高度；背景图用 bg-center + bg-no-repeat + bg-contain/cover；BS4 用 my-auto 替代；避免 absolute + transform 因响应式冲突。
用 align-items-center 配合 d-flex 是最稳的方案
bootstrap 5+ 的 flex 工具类直接支持容器级垂直居中，不需要额外写 css，也不依赖图片尺寸或父容器高度是否固定。核心是让容器变成 flex 容器，并设置交叉轴对齐方式为 center。
常见错误是只加 text-center（只水平居中）或误用 vertical-align: middle（对块级元素无效）。
- 父容器必须有明确高度（比如
min-height: 300px或height: 100vh），否则 flex 的交叉轴没参考基准 - 图片本身设为
img-fluid可保持响应式，但不要同时加mx-auto（它会和align-items-center冲突） - 如果容器里还有其他内容（比如标题+图片），用
flex-column+justify-content-center更可控
<div class="d-flex align-items-center justify-content-center" style="min-height: 400px;"> <img src="logo.png" class="img-fluid" alt="logo"> </div>
图片作为背景时用 bg-center + bg-no-repeat
当图片不走 <img> 标签，而是通过 background-image 设置时，Bootstrap 5 提供了现成的工具类组合，比手写 background-position: center 更省事。
容易踩的坑是忘记设容器宽高，或者没加 bg-no-repeat 导致图片平铺；另外 bg-center 只控制位置，不解决“容器内居中显示整张图”的问题，得配合 bg-contain 或 bg-cover。
-
bg-contain：等比缩放至完全可见，适合 logo 类小图 -
bg-cover：等比缩放至填满容器，可能裁剪边缘，适合 banner 大图 - 必须搭配
bg-no-repeat，否则bg-center无效
<div class="bg-image bg-center bg-no-repeat bg-contain"
style="width: 200px; height: 200px; background-image: url('icon.svg');">
</div>
旧项目还在用 Bootstrap 4？my-auto 是兼容解法
Bootstrap 4 没有 align-items-center 这种 flex 工具类，但提供了 my-auto（即 margin-top: auto; margin-bottom: auto），在已知高度的 flex 容器里能达成同样效果。
注意它只在 flex 容器中生效，单独加在普通 div 上没用；而且如果父容器没设 display: flex，得手动补上 d-flex（BS4 中叫 d-flex，不是 flex）。
- 必须确保父容器是 flex（加
d-flex），且有明确高度 -
my-auto对单个子元素有效；多个子元素时，只有被加了该类的元素会居中 - BS4 不支持
bg-center，背景居中得回退到自定义 CSS
<div class="d-flex" style="min-height: 300px;"> <img src="avatar.jpg" class="my-auto img-fluid" alt="avatar"> </div>
为什么不用 position: absolute + transform？
虽然纯 CSS 能写 top: 50%; left: 50%; transform: translate(-50%, -50%)，但在 Bootstrap 项目里容易和栅格系统、响应式断点冲突——比如在 col-md-6 里用绝对定位，图片会脱离文档流，导致右侧列上移。
更隐蔽的问题是：当容器高度随内容变化（比如文字增减）时，绝对定位的图片不会自动重算位置，而 flex 方案会实时响应。
- 绝对定位需要父容器设
position: relative，漏写就失效 - 移动端缩放或字体放大时，
transform基准可能偏移 - 如果图片是响应式（
img-fluid），transform仍按原始尺寸计算，可能造成视觉错位
