mx-auto 在 .navbar-brand 上不生效是因为 flex 布局需左右同级子元素“夹击”才能触发居中；text-center 对 flex 子项无效；正确解法是采用三栏结构（me-auto、mx-auto、ms-auto 三个同级子元素），并注意移动端 offcanvas 中的 justify-content-center 和移除 flex-grow-1。
mx-auto 在 .navbar-brand 上不生效，是因为 .navbar 是 flex 容器但缺少左右同级子元素“夹击”——不是写法错，是 flex 布局机制决定的。
为什么直接加 mx-auto 或 text-center 没用
浏览器只在 .navbar-brand 两侧都有同级 flex 子项时，才把 margin-inline: auto 解释为居中；默认结构里它常是第一个子元素，右侧只有 .navbar-toggler（非 flex 项目）或空缺，mx-auto 就被忽略。而 text-center 对 flex 子项完全无效——它只作用于文本流，不干预 flex 排列。
- 常见错误现象：
<div class="navbar-brand mx-auto">Logo</div>单独存在，logo 仍在最左 - 给
.container-fluid加text-center，导航项全乱套，右侧菜单消失 - 用
position: absolute硬定位，折叠态下 logo 遮挡汉堡按钮或移出视口
必须用三栏结构：左空占位 + 中间 logo + 右空占位
核心是让 .navbar-brand 处于两个同级 .navbar-nav 容器之间，形成“夹击”，此时 mx-auto 才真正触发居中逻辑。三者必须是 .navbar 的直系子元素，不能嵌套在额外 <div> 里。
- 左侧：用
<div class="navbar-nav me-auto"></div>（哪怕为空） - 中间：用
<div class="navbar-brand mx-auto">Logo</div>，不加其他 margin 类 - 右侧：用
<div class="navbar-nav ms-auto"></div>（哪怕为空） - 折叠按钮
.navbar-toggler必须和这三者同级，不能塞进任一<div>内
移动端折叠态（offcanvas）下 logo 偏左？改两个地方
小屏展开后，.offcanvas-body 默认是 column 方向堆叠，mx-auto 失效，且如果右侧 .navbar-nav 还挂着 flex-grow-1，它会抢走全部宽度，把 logo 挤到最左。
- 给
<div class="offcanvas-body">加justify-content-center - 从
<ul class="navbar-nav">上移除flex-grow-1（它本就不该出现在 offcanvas 的 nav 列表中） - 漏掉任一步，logo 都不会居中——这不是 bug，是 flex 主轴方向变化后的必然行为
别一上来就套 d-flex justify-content-center align-items-center
这个组合在 navbar 里容易白配，因为生效条件很具体：
- 父容器（比如
.navbar-brand的直接父级）必须有明确高度，例如min-height: 56px，否则align-items-center没参考基准 -
.navbar-brand自身不能是 inline 元素（默认就是），得加d-block或flex-fill才响应交叉轴对齐 - 如果父级被其他 CSS 强制设为
display: block !important，那d-flex就完全不生效
先打开 DevTools 看 computed styles，确认父容器的 display 和 height 是否符合，再决定要不要加这三个类。
