mx-auto居中失效是因为元素未设为块级或父容器非flex；align-items-center需父容器先加d-flex且有高度；translate-middle须配合position-relative/absolute使用。
mx-auto 居中失效：它只对块级元素生效，且父容器不能是 text-align:center
给图片或按钮加 mx-auto 却没居中？大概率是因为元素没转成块级。Bootstrap 的 mx-auto 依赖 margin 计算，而 <img> 和 <a></a> 默认是内联元素，margin-left/right 对它们无效。
- 必须显式加
d-block（或text-center配合内联元素） - 如果父容器本身用了
text-align: center，别误以为这是mx-auto起效了——那是文本对齐在起作用，对块级子元素无影响 - 检查开发者工具的「Computed」面板：确认
margin-left和margin-right真的是auto；如果不是，说明被其他样式（比如自定义 CSS 或插件）覆盖了
align-items-center 没反应：父容器根本不是 flex 容器
align-items-center 不是“加了就垂直居中”的魔法类，它只在 flex 容器里解释为“主轴为水平时，交叉轴上居中”。Bootstrap 4/5 中，.row、.card、.navbar 默认都不是 flex——它们是 display: block。
- 先给子元素的**直接父容器**加
d-flex，否则这个类完全不解析 - 加了
d-flex还不居中？大概率父容器高度是auto——flex 垂直居中需要明确的交叉轴空间，比如加min-vh-100或h-100（注意祖先链得有高度） - 别在
d-flex容器里混用text-center试图水平居中块级子项，它不起作用；该用justify-content-center
translate-middle 白加：它不是布局类，而是 transform 封装
translate-middle 本质是 transform: translate(-50%, -50%)，只对已定位元素（position: absolute 或 fixed）生效。把它加在普通文档流里的 <div> 上，浏览器根本不会重排，视觉毫无变化。
<ul>
<li>必须三件套齐备：<code>position-relative（父容器）、position-absolute top-50 start-0（子元素）、translate-middle（回拉自身宽高一半）
position-relative，子元素就相对于 body 定位，导致“居中”偏移到视口左上角d-flex 容器里套 translate-middle——flex 对齐逻辑和 transform 叠加后，位置不可预测，尤其在响应式缩放时justify-content-center 加在分页上还是不居中？
justify-content-center 对 .pagination 生效的前提，是它被加在正确的元素上：必须是 <ul class="pagination"></ul> 自己，而不是外层 <nav></nav> 或包裹它的 <div>。
<ul>
<li>Bootstrap 4/5 的 <code>.pagination 默认就是 display: flex，所以这个类能起作用——但只限于它直接作用的元素
.pagination 是 inline-block 布局，压根不支持 justify-content 类.pagination { display: block } 或 grid？那会直接废掉 flex 行为
