Bootstrap 5 水平居中需先设宽度（如 col-md-6、w-50），再用 mx-auto；Flex 布局推荐 min-vh-100 d-flex justify-content-center align-items-center；text-center 仅对内部行内内容生效，不移动块级容器。
用 mx-auto + 宽度控制实现水平居中
Bootstrap 5 默认不给元素设宽度，所以单纯加 text-center 或 justify-content-center 对块级元素无效。真正起作用的是：先限定宽度（比如 col-md-6、w-50），再用 mx-auto 让左右外边距自动均分。
常见错误是只加 text-center，结果发现 div 撑满整行，文字居中但容器本身没动。
-
mx-auto要求元素是块级且有明确宽度（display: block+width不为 auto） - 响应式场景下推荐用栅格类，如
col-lg-8 col-md-10 mx-auto，比硬写w-75更可靠 - Flex 容器内慎用
mx-auto—— 它可能被justify-content覆盖，此时直接用justify-content-center更稳妥
Flex 布局中用 justify-content-center 和 align-items-center
这是最灵活的动态居中方式，尤其适合卡片、登录框等需要同时水平+垂直居中的场景。关键在于父容器必须启用 Flex，且高度要有定义（否则 align-items-center 无效）。
典型陷阱是忘记设父容器高度。比如在 body 直接加 d-flex justify-content-center align-items-center，但 body 高度默认由内容撑开，结果还是顶部对齐。
- 常用组合：
min-vh-100 d-flex justify-content-center align-items-center（min-vh-100确保至少一屏高） - 子元素若为响应式宽度（如
col-md-6），会随视口变化自动重居中，无需额外 JS - 注意
align-items-center对单行文本无效（它对 flex item 生效，不是对行内内容），文字垂直居中仍需line-height或pt-5 pb-5等辅助
文本内容用 text-center 就够了，但别误用于容器
text-center 只影响其内部行内内容（文字、span、图片等）的对齐方式，不会移动块级子元素的位置。很多人想让一个 div 居中，却给它加 text-center，结果毫无反应。
- 适用场景：段落居中、按钮组内按钮文字对齐、卡片标题居中
- 和
mx-auto混用也没问题，比如<div class="w-50 mx-auto text-center">...</div>—— 容器居中 + 内部文字居中 - 响应式变体有
text-md-start、text-lg-center等，可针对不同断点单独控制
避免用 position: absolute + transform 手动居中
虽然 top: 50%; left: 50%; transform: translate(-50%, -50%) 能居中，但在 Bootstrap 项目里属于“绕过框架”的做法，会破坏响应式流式布局逻辑，也容易和栅格类冲突。
尤其当配合 col 类或 container 使用时，绝对定位会让元素脱离文档流，导致后续元素上移、媒体查询失效等问题。
- 仅在极少数需要脱离布局流的场景（如悬浮提示、模态框背景遮罩）才考虑手动定位
- Bootstrap 自带的
position-absolute、top-50、start-50等工具类，本质也是封装了这套逻辑，但它们不推荐用于常规内容居中 - 真要用，务必确认父容器有
position: relative（Bootstrap 提供position-relative类）
真正麻烦的不是“怎么写”，而是判断该用哪一套机制：是文本对齐、容器居中，还是视口级居中。选错前提，后面所有类都会失效。
