为什么Bootstrap 5中mx-auto d-block对响应式图片img-fluid不生效？

问题原因 #

你当前给图片添加的mx-auto、d-block类仅能实现水平方向居中，而Bootstrap的.row默认align-items属性为stretch，所以右侧.col-4的高度会和左侧高度更高的表单列自动对齐，图片默认靠列的顶部对齐，所以视觉上没有在列内完全居中。

解决方案 #

方案1：整行内容垂直对齐（推荐） #

直接给你的.row元素添加align-items-center类即可，会让行内所有列的内容默认垂直居中，搭配你已经写好的图片水平居中类，就能实现图片在列内完全居中：

<!-- 修改前的row -->
<div class="row">
<!-- 修改后的row -->
<div class="row align-items-center">

方案2：单独给右侧列设置居中 #

如果不想调整整行的对齐规则，也可以给右侧.col-4添加flex居中类，无需修改图片的现有类就能实现完全居中：

<!-- 修改前的col-4 -->
<div class="col-4">
<!-- 修改后的col-4 -->
<div class="col-4 d-flex align-items-center justify-content-center">

内容的提问来源于stack exchange，提问作者user13116343