bootstrap 5 中 navbar-brand 默认不居中，因 .navbar 是 flex 容器且 justify-content: flex-start；必须用三栏结构（左 .navbar-nav.me-auto、中 .navbar-brand.mx-auto、右 .navbar-nav.ms-auto）实现可靠居中，且需在 offcanvas-body 上加 justify-content-center 并移除 navbar-nav 的 flex-grow-1。
navbar-brand 在 bootstrap 5 中默认不会居中，因为 .navbar 是 display: flex 容器且 justify-content: flex-start，navbar-brand 作为首个子元素会被“钉”在左侧。直接加 text-center、mx-auto 或 justify-content-center 都不可靠——不是失效，就是破坏左右导航分布。
必须用三栏 flex 结构：左空 / Logo / 右空
核心是让 navbar-brand 处于两个同级 .navbar-nav 容器之间，形成“夹击”，浏览器才认可它是可居中项。
-
.navbar-nav.me-auto放最左（哪怕为空），占位并推走右侧内容 -
.navbar-brand.mx-auto放中间，此时mx-auto才真正生效 -
.navbar-nav.ms-auto放最右（哪怕为空），防止 logo 被右侧导航挤偏 - 三者必须是
.navbar的**直系子元素**，不能嵌套在额外div里 - 不要给
.navbar-brand加flex-grow-1——它会撑满整行，把右侧导航顶没
<nav class="navbar navbar-expand-lg"><div class="container-fluid">
<div class="navbar-nav me-auto"></div>
<div class="navbar-brand mx-auto">MyLogo</div>
<div class="navbar-nav ms-auto"></div>
</div>
</nav>
折叠态（offcanvas）下 Logo 偏左？改两个地方
移动端展开后，.offcanvas-body 默认是块级垂直堆叠，mx-auto 失效，且如果右侧 .navbar-nav 还挂着 flex-grow-1，它会抢走全部宽度，把 logo 挤到最左。
- 给
<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 元素，默认就是 inline，得加d-block或flex-fill才响应交叉轴对齐 - 如果父级被其他 CSS 强制设为
display: block !important，那d-flex就完全不生效 - 别一上来就套这三个类——先打开 DevTools 看 computed styles，确认
display和height是否符合预期 - Bootstrap Icons 内置了
vertical-align: -.125em，但只对<i></i>生效；PNG/SVG 图片需手动加 - 避免在
.navbar-brand里混用<img>和<strong></strong>却不加布局控制——它们会按不同基线渲染 - 稳妥做法：用
<div class="d-flex align-items-center"> 包裹图标和文字，统一控制对齐，不依赖 baseline<li>折叠态下对齐偏移？别碰 flex，用媒体查询微调 <code>padding-top或margin-top更精准
用 d-flex justify-content-center align-items-center 居中 logo？先看前提
这个组合在 navbar 里容易白配，因为生效条件很具体：
文字 + 图标混排时垂直不对齐？不是居中问题，是基线问题
当 <img> 和文字并排放在 .navbar-brand 里，看起来“一个高一个低”，本质是 vertical-align: baseline 导致的，默认行为，和居中无关。
真正的麻烦点不在怎么写，而在你改了一处，却没意识到另一处（比如 offcanvas 的 flex-grow-1）正在悄悄破坏它。所有居中失效，几乎都源于结构错位或前提缺失，而不是类名拼错了。
