bootstrap 5 中最快最可靠的居中方案是同时使用 d-flex、justify-content-center 和 align-items-center，前提是父容器有明确高度（如 min-height: 100vh）且未被 display: block !important 等覆盖。
用 justify-content-center 和 align-items-center 最快实现
Bootstrap 5 的 Flex 工具类是当前最可靠、语义最清晰的居中方案，前提是父容器已设为 display: flex（即加了 d-flex）。它不依赖高度、不触发重排、兼容所有现代浏览器。
- 必须同时加
d-flex、justify-content-center、align-items-center，缺一不可 - 父容器需有明确高度（比如
min-height: 100vh），否则子元素会按内容撑高，视觉上不“居中” - 若子元素是块级且宽度未设限，默认会占满父宽——这不是 bug，是 flex 的正常行为；加
mx-auto可约束水平尺寸
为什么不用 text-center + mt-5 这类旧套路
这类写法本质是“猜距离”，在响应式场景下极易失效：屏幕变小后 mt-5 可能过大或过小，text-center 只影响内联内容对齐，对块级子元素垂直方向完全无效。
-
text-center只作用于文本和内联元素，对div、section等块级容器无垂直效果 -
mt-*类依赖固定间距值，无法随视口动态调整，也不适配不同设备的行高/字体缩放 - 嵌套多层
mt-*容易叠加出意料之外的空白，调试成本高
遇到 align-items-center 不生效？先检查这三处
常见失效不是类名写错，而是布局前提没满足。Flex 居中要求父容器严格控制 flex 上下文。
- 父元素是否漏了
d-flex？仅加justify-content-center不会启用 flex 布局 - 父容器是否被其他样式覆盖？比如某个 CSS 规则写了
display: block !important - 子元素是否设置了
align-self: start或类似覆盖属性？它会优先于父级的align-items
需要兼容 IE10/11？改用 position: absolute + transform
Bootstrap 5 官方已放弃 IE 支持，如果项目强制要求兼容，Flex 方案会失效，得回退到传统定位法。注意：不能只靠 top: 50%，必须配合 transform: translateY(-50%) 才能真正居中。
- 父容器需设
position: relative（Bootstrap 中可用position-relative） - 子元素加
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - IE10 需补全
-ms-transform: translate(-50%, -50%)，否则偏移量计算错误
