必须给.col加d-flex align-items-center justify-content-center才能双轴居中图片，因.col默认非flex容器且无高度参照；仅靠.row的align-items-center只能让整列居中，无法控制内部图片位置。
用 d-flex align-items-center justify-content-center 套在 .col 内部
直接给 .col 加 d-flex 类，再补上 align-items-center 和 justify-content-center，就能让里面的图片双轴居中。前提是这个 .col 所在的父容器（比如 .row）不能限制高度，否则垂直方向没参照系。
常见错误包括：
- 只加
text-center—— 它只影响内联内容对齐，对块级 - 在
.col上加mx-auto却不设d-flex——mx-auto只管水平，且需块级前提，无法触发垂直居中 - 忘记图片本身是行内元素，默认有基线对齐带来的底部空隙，建议加
align-text: middle或直接设vertical-align: middle防止错位
为什么不能只靠 .row 的 align-items-center
.row 默认是 display: flex，它的 align-items-center 是控制所有子 .col 在交叉轴（即垂直方向）上的对齐方式，不是控制 .col 内部内容的。也就是说，它会让整列上下居中，但列里那张图片仍可能贴顶或贴底。
所以真正起作用的是两层结构：
-
.row.align-items-center→ 让.col在行内垂直居中 -
.col.d-flex.align-items-center.justify-content-center→ 让图片在列内垂直+水平居中
如果只用第一层，而 .col 高度由图片撑开，那“居中”就等于没效果；第二层才是实打实控制图片位置的关键。
img-fluid 和 mx-auto 能否共存
不能。一旦 .col 是 d-flex 容器，mx-auto 对子元素（如 justify-content，不再走 margin 自动计算逻辑。
正确做法是：
- 删掉
mx-auto，改用justify-content-center控制水平 - 保留
img-fluid，它负责响应式缩放，不影响居中逻辑 - 若图片尺寸远小于列宽，可加
max-width: 100%防止溢出（img-fluid已含此规则，一般不用额外加）
背景图场景下别用 align-items-center
如果图片是通过 background-image 设置的（比如用 bg-image 类），align-items-center 完全不起作用——它只管子元素布局，不管背景渲染。
此时必须用 CSS 属性：
-
background-position: center center（不能只写center，否则垂直方向默认是top） -
background-size: cover或contain，防止变形或留白 -
min-height: 100vh或明确高度，确保容器有垂直参考基准
Bootstrap 5 的 bg-center 类只是 background-position: center center 的快捷写法，但它不解决高度缺失问题，这点容易被忽略。
