LOGO居中需用三栏flex结构：左.navbar-nav（order-1）、中.navbar-brand（order-2+flex-grow-1+d-flex+justify-content-center）、右.navbar-nav（order-3）；offcanvas中需同时加justify-content-center于offcanvas-body并移除navbar-nav的flex-grow-1；d-flex+justify-content-center+align-items-center生效前提为父容器有明确高度且navbar-brand为块级元素；侧边栏图标文字垂直对齐应统一用d-flex align-items-center容器，禁用margin-top。
LOGO 居中必须用三栏 flex 结构，不是加 text-center 就完事
单纯给 .navbar-brand 加 text-center 或 mx-auto 不起作用——因为 .navbar 默认是 display: flex，但它的子元素（如 .navbar-brand、.navbar-nav）默认按文档流顺序排列，没有自动分配剩余空间的机制。真正可靠的做法是把导航栏显式拆成左、中、右三部分：
- 左侧放
.navbar-nav（可为空），加order-1 - 中间放
.navbar-brand，加order-2 flex-grow-1 d-flex justify-content-center - 右侧再放一个
.navbar-nav（可为空），加order-3
这样 flex 的 order 控制视觉顺序，flex-grow-1 让中间区域“吃掉”左右之间的所有空白，视觉上就是居中。注意：不能只靠 justify-content-center，否则左右有内容时 logo 会被挤偏。
展开后（offcanvas）的 logo 居中要动两个地方
移动端折叠菜单（offcanvas）里 logo 偏左或偏上，常见原因是 .offcanvas-body 没启用 flex 主轴居中，且 .navbar-nav 还挂着 flex-grow-1 抢占了全部宽度。修复只需两步：
- 在
<div class="offcanvas-body"> 上加 <code>justify-content-center - 从
<ul class="navbar-nav"></ul>中移除flex-grow-1（它本就不该出现在 offcanvas 的 nav 列表上） - 父容器（比如
.navbar-brand的直接父级）必须有明确高度，比如min-height: 56px，否则align-items-center没参考基准 -
.navbar-brand自身不能是inline元素（如<a></a>默认是 inline），得加d-block或flex-fill才能响应交叉轴对齐 - 如果父级被其他 CSS 强制设为
display: block !important，那d-flex就完全不生效 - 把图标（
<i></i>）和文字（<span></span>）放在同一个<div class="d-flex align-items-center"> 容器里 <li>确保两者都没有额外 <code>margin、padding或vertical-align干扰 - 如果用 Bootstrap Icons，务必加
bi-fw（fixed-width）类，避免图标宽度不一致导致上下晃动
漏掉第二步的话，.navbar-nav 会撑满整行，logo 被挤到最左边；漏掉第一步，即使 nav 缩小了，logo 依然按默认左对齐。这两个操作必须同时生效。
用 d-flex justify-content-center align-items-center 居中 logo 的前提条件
这个组合看似万能，但在 navbar 里容易失效，原因很具体：
所以别一上来就套这三个类，先检查 computed styles 里父容器的 display 和 height 是否符合预期。
侧边栏图标+文字垂直对齐别碰 margin-top
在侧边导航栏里让图标和文字垂直居中，很多人习惯调 margin-top 或 line-height，但这在不同字体大小、缩放比例、设备像素比下极易错位。正确路径只有一条：
这个方案不依赖像素值，也不受父容器行高影响，是唯一能随字号缩放同步居中的方式。一旦开始手动调 margin-top，基本等于放弃响应式维护。
