直接加 mx-auto 或 text-center 不生效，因 .navbar 是 flex 容器且默认 justify-content: flex-start；三栏结构（me-auto + mx-auto + ms-auto）是唯一不依赖自定义 css、语义清晰且全断点稳定的方案。
为什么直接加 mx-auto 或 text-center 不生效
因为 .navbar 是 display: flex 容器，默认 justify-content: flex-start，而 .navbar-brand 作为首个子元素，浏览器不会把它当作“可居中项”——mx-auto 只在它左右都有同级 flex 子项时才触发居中逻辑。单纯加 text-center 对 flex 子项无效；用 position: absolute 会破坏折叠态、遮挡汉堡菜单、响应式错乱。
必须用三栏结构：me-auto + mx-auto + ms-auto
这是唯一不依赖自定义 CSS、语义清晰且全断点稳定的方案：
-
<div class="navbar-nav me-auto"></div>：左侧占位容器，哪怕为空也必须存在，确保“左锚点” -
<div class="navbar-brand mx-auto">Logo</div>：中间项，此时mx-auto才真正起作用 -
<div class="navbar-nav ms-auto"><ul class="navbar-nav">...</ul></div>：右侧占位+菜单容器，防止 Logo 被右侧内容挤偏 - 三者必须是
<nav></nav>或<div class="container-fluid"> 的**直系子元素**，不能套在额外 <code><div> 里 <li>别给 <code>.navbar-brand加flex-grow-1——它会撑满整行，把右侧导航顶没 - 给
<div class="offcanvas-body"> 显式加 <code>justify-content-center - 从
<ul class="navbar-nav"></ul>上移除flex-grow-1（它本就不该出现在 offcanvas 的 nav 列表中） - 漏掉任一，Logo 就不会居中——这不是 bug，是 flex 主轴方向切换后的必然行为
- 父容器（比如
.navbar-brand的直接父级）必须有明确高度，例如min-height: 56px，否则align-items-center没参考基准 -
.navbar-brand默认是 inline 元素，align-items-center对它无效，得加d-block或flex-fill - 如果父级被其他 CSS 强制设为
display: block !important，那d-flex就完全不生效 - 别一上来就套这三个类——先打开 DevTools 看 computed styles，确认
display和height是否符合预期
折叠态（offcanvas）下 Logo 偏左？改这两个地方
移动端展开后，.offcanvas-body 是 column 方向 flex 容器，mx-auto 失效，且若 .navbar-nav 还挂着 flex-grow-1，它会抢走全部宽度：
d-flex justify-content-center align-items-center 为什么常白配
这套组合在 navbar 里容易失效，因为生效前提很具体：
flex-grow-1 移除和 justify-content-center 必须成对出现，少一个，Logo 就回原形。
