最直接有效的垂直居中方案是 align-items-center 配合 d-flex 父容器，需确保父容器有明确高度或内容撑开，避免混用 text-center 或 vertical-align，全屏场景优先用 min-vh-100。
用 align-items-center 配合 Flex 容器是最直接有效的方案
Bootstrap 5 默认启用 Flex 布局，align-items-center 是最轻量、最可靠的垂直居中方式。它不依赖图片尺寸，也不要求父容器设固定高，只要父容器是 Flex（比如加了 d-flex），就能生效。
常见错误是只加 align-items-center 却忘了让父容器变成 Flex——结果样式完全没反应。
- 父容器必须有
d-flex（或d-inline-flex）才能激活 Flex 上下文 - 如果容器本身是块级且无高度，需确保它有明确高度（如
min-height: 200px）或内容撑开，否则“居中”无参照 - 避免和
text-center混用想同时居中图文：text-center只影响行内内容水平对齐，对 Flex 子项无效
object-fit: contain 和 object-position 要配合 height 才能稳定居中
当需要等比缩放图片并确保其视觉中心在容器正中时，纯 CSS 的 object-fit 更可控，但 Bootstrap 不封装这组属性，得手写。
容易踩的坑是只设 object-fit: contain 却不设容器 height 和 overflow: hidden，导致图片溢出或位置飘移。
- 容器需显式设置
height（如h-100或自定义值） - 图片必须设
width: 100%; height: 100%，否则object-fit不触发 - 默认
object-position: 50% 50%已居中，无需额外写；若要微调，才用object-position: center top这类值
不要用 vertical-align: middle 处理块级图片
这个属性只对 display: inline 或 table-cell 元素有效。Bootstrap 里 <img> 默认是 inline，但一旦加了 d-block、mx-auto 或任何块级工具类，它就失效了。
典型现象：加了 vertical-align: middle 没反应，检查 computed styles 会发现 display 已是 block。
- 除非你刻意保持图片为
inline且父容器是line-height可控的行内环境（极少见） - Bootstrap 4/5 中所有居中意图都应优先走 Flex 或 Grid，
vertical-align属于历史遗留路径
响应式场景下，min-vh-100 + d-flex 比 vh-100 更安全
用 vh-100 设全屏高度时，iOS Safari 和部分安卓浏览器会把地址栏高度算进 100vh，滚动后出现空白或错位。而 min-vh-100 是 Bootstrap 5 提供的兼容性补丁。
这不是图片居中的核心逻辑，但一旦容器高度不准，所有居中都会偏移。
- 全屏图片容器推荐组合：
min-vh-100 d-flex align-items-center justify-content-center - 如果图片需自适应宽度，加
w-100并设object-fit: cover，避免拉伸变形 - 慎用
h-100在嵌套较深的组件里——它依赖父级有明确高度，否则塌陷
