不可靠。text-center仅对行内内容水平居中且对垂直无效；d-flex需配合justify-content-center和align-items-center，并要求父容器有明确高度（如min-vh-50）才生效，否则垂直居中无参照。
Bootstrap 5 中用 text-center 和 d-flex 实现图片居中是否可靠？
不可靠。仅用 text-center 只能水平居中，对垂直方向无效；而 d-flex 需配合具体对齐类才能生效，且默认 flex-direction 是 row，不处理垂直方向。
真正可行的是组合使用 flex 工具类：d-flex + justify-content-center（水平）+ align-items-center（垂直），且容器需有明确高度（否则垂直居中无参照）。
-
col默认是display: block，必须显式加d-flex - 若父
col没设min-height或height，align-items-center会失效——因为 flex 容器高度塌陷 - 图片本身建议加
img-fluid防止溢出，但注意它会重置max-width: 100%，与居中不冲突
为什么给 col 加 min-height 比加 height 更安全？
因为 col 的宽度随栅格变化，内容又可能动态加载，固定 height 容易裁剪或留白过多；min-height 允许内容撑高，同时保证基础高度用于垂直对齐。
- 常见做法是设
min-height: 200px（按设计需求调整） - 如果父行用了
g-0或去除了 padding，也要确认col内边距没被意外清空，否则视觉上“偏上” - 在响应式场景下，可搭配
min-height-sm、min-height-md等断点类（Bootstrap 5.3+ 支持）
object-fit: contain 和 cover 对居中效果的影响
当图片宽高比与容器不一致时，仅 flex 居中只能保证图块位置居中，但图片自身可能拉伸或裁剪——这时需控制缩放行为。
-
object-fit: contain保持比例、完整显示，留白在上下/左右，此时align-items和justify-content仍有效 -
object-fit: cover保持比例、填满容器，可能裁剪边缘，同样依赖 flex 对齐定位 - 务必加
width: 100%和height: 100%才能让object-fit生效，否则只作用于原始尺寸 - 别忘了加
overflow: hidden到容器上，防止cover溢出
Bootstrap 4 用户要注意的 class 差异
Bootstrap 4 的 flex 工具类命名相同，但缺失部分响应式变体（如 align-items-sm-center），且 img-fluid 行为略有不同：它默认设了 height: auto，而 Bootstrap 5 移除了该声明，更利于 object-fit 控制。
- BS4 中若要响应式垂直居中，得手动写媒体查询或用
align-self-类作用于图片自身 - BS4 的
col在 flex 容器里可能因flex: 1 1 0%导致宽度异常，建议显式加flex-grow-0避免撑开 - 统一推荐加
mx-auto作为兜底：当 flex 失效时，至少保水平居中
<div class="row">
<div class="col d-flex justify-content-center align-items-center min-vh-50">
<img src="demo.jpg" class="img-fluid" style="width:100%; height:100%; object-fit:contain;">
</div>
</div>
min-vh-50 是关键——它提供可靠高度基准，比写死 px 更适应视口变化。没有这个，其他所有居中类都只是“看起来像”。 
