align-items-center 对图片无效是因为它仅在 Flex 容器中生效，图片需包裹在带 d-flex 且具明确高度（如 min-vh-100）的父容器内；直接加该类到 img 标签无效。
为什么 align-items-center 对图片没反应
因为这个类只在 Flex 容器中生效，而图片本身不是 Flex 子项——它必须被包裹在加了 d-flex 的父容器里。常见错误是直接给 <img> 加 align-items-center，结果完全无效。
- 父容器必须同时有
d-flex（或d-inline-flex）和明确高度（如min-height: 200px或min-vh-100），否则“垂直居中”失去参照 - 如果容器内容为空且无高度，
align-items-center不会触发视觉变化 - 别混用
text-center：它只影响行内内容对齐，对 Flex 子项（包括<img>）无作用
my-auto 是 Bootstrap 4 的兼容解法，但限制多
my-auto 在 Bootstrap 4 中能替代 align-items-center，但它依赖两个前提：父容器必须是 Flex（即已加 d-flex），且该容器要有明确高度。它只对单个子元素起效；多个子项时，只有加了 my-auto 的那个会被居中。
- 不适用于非 Flex 环境：单独加
my-auto到普通<div>上毫无效果 - 在 Bootstrap 5 中已非首选，
align-items-center更语义清晰、行为确定 - 响应式场景下，若父容器高度随视口变化（如全屏），仍需配合
min-vh-100而非vh-100，避免 iOS Safari 地址栏高度干扰
背景图居中只能靠 background-position: center center
Bootstrap 没有封装背景图居中的工具类，text-center、mx-auto、justify-content-center 全部无效。真正起作用的是原生 CSS 属性，且必须写双值。
- 只写
background-position: center是错的——它等价于center top，图片会贴顶，不是垂直居中 - 必须搭配
background-size: cover或contain，否则图片可能拉伸、裁切或留白失控 - 容器必须有显式高度：用
min-height: 100vh比height: 100vh更安全，尤其在移动端 - 避免把背景图直接加在
<div class="container">上——它默认无高度，背景根本不会显示
图片覆盖文字居中必须用 position: absolute + transform
想让标题文字盖在图片正中央，不能靠 Flex 工具类，也不能只设 top: 50%; left: 50%。那样只是把文字左上角挪到中心点，实际位置偏右下。
- 容器必须设
position: relative，否则absolute文字会相对于 body 定位，极易偏移 - 文字层要加
top: 50%; left: 50%; transform: translate(-50%, -50%)才真正居中 -
z-index: 2必须显式声明，否则可能被 navbar 或其他定位组件遮挡 - 别用
margin-top: -XXpx手动回拉——图片尺寸一变就失效，transform是唯一可靠方案
min-vh-100？还是固定像素？没确认这点，调样式就是碰运气。 
