Bootstrap 5 不提供单个 class 同时控制某断点下文字水平+垂直居中，必须组合 d-flex、justify-content-{breakpoint}-center 和 align-items-{breakpoint}-center，并确保容器有明确高度。
用 Bootstrap 5 的 flex 工具类实现断点级居中
直接结论：Bootstrap 5 不提供单个 class 同时控制“在某断点下文字水平+垂直居中”，必须组合 justify-content-center、align-items-center 和响应式前缀（如 sm、md）来实现。靠 text-center 只能水平居中，对垂直无效。
为什么 text-center 在断点下不能垂直居中
text-center 本质是设置 text-align: center，只影响行内内容的水平对齐；垂直方向它完全不生效，也不响应断点。想垂直居中，容器必须是 flex 布局且高度明确（或由父容器撑开），否则 align-items-center 没作用对象。
- 常见错误：给
<p>直接加class="text-center d-flex justify-content-center align-items-center"—— 但<p>默认是 block，没高度，flex 无法垂直居中 - 正确做法：把 flex 类加在有明确高度（或继承高度）的容器上，比如
<div class="d-flex h-100"> - 断点写法不是
text-md-center+ 某个“vertical-md-center”——后者根本不存在
实战写法：md 断点起居中，xs/sm 下默认左对齐
假设你要在屏幕 ≥768px（md）时让文字水平垂直居中，小屏保持默认左对齐+顶部对齐：
<div class="d-flex flex-column min-vh-100">
<div class="d-flex flex-grow-1 justify-content-md-center align-items-md-center">
<p class="mb-0">Hello World</p>
</div>
</div>关键点：
-
min-vh-100确保外层容器至少占满视口高度，否则内部 flex 无参考高度 -
flex-grow-1让中间层占满剩余空间（避免文字贴顶） -
justify-content-md-center和align-items-md-center—— 注意前缀md写在属性名中间，不是后缀；它们只在md及以上生效，小屏自动回退到 flex 默认值（flex-start） - 不要写成
justify-content-center-md，这是错的
兼容性与容易忽略的坑
Bootstrap 4 和 5 的响应式 flex 类命名一致，但 Bootstrap 4 需要额外确保容器 display 为 flex（d-flex），而 5 中 justify-content-* 等类本身不触发 flex，必须显式加 d-flex 或 d-inline-flex。
- 如果父容器用了
position: absolute或height: auto，align-items-center会失效——检查 computed height 是否为 0 - 文字多行时，
align-items-center居中的是整个 flex item（<p>元素），不是每行文字；如需每行居中，用text-center+ 行高控制，但那是另一套逻辑 - IE11 不支持
min-vh-100，需 fallback：style="min-height: 100vh"
真正卡住人的往往不是 class 名记不住，而是容器没高度、flex 没启用、或者断点前缀位置写反了。先确认这三件事，再调 class。
