navbar-brand无法用text-center居中，因navbar是flex容器且justify-content常设为space-between，text-center对flex子项无效；应使用ms-auto与me-auto配合flex-fill实现兼容性居中。
为什么 navbar-brand 无法用 text-center 居中？
因为 Bootstrap 的 navbar 默认是 flex 布局，navbar-brand 被包裹在 navbar-nav 或独立 div 中时，父容器的 justify-content 通常设为 space-between（左右撑开），此时单纯加 text-center 对块级元素无效，且会破坏响应式折叠逻辑。
用 ms-auto me-auto 配合 flex-fill 是最稳方案
核心思路：让 Logo 所在元素“争取中间位置”，同时不干扰左侧菜单和右侧组件的默认流。Bootstrap 5+ 提供了语义清晰的间距工具类：
-
ms-auto把 Logo 左侧的空白自动撑满 -
me-auto把 Logo 右侧的空白自动撑满 - 二者合用，等效于
margin: 0 auto，但兼容 flex 容器 - 若 Logo 在
navbar-nav内部，需额外加flex-fill防止它被压缩
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<div class="navbar-nav flex-fill">
<a class="navbar-brand ms-auto me-auto" href="#">MyLogo</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse">...</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link">Home</a></li>
</ul>
</div>
</div>
</nav>
遇到折叠后 Logo 偏移？检查 navbar-collapse 是否包裹了 Logo
常见错误：把 navbar-brand 放进 navbar-collapse 内部。这样在小屏幕展开时，Logo 会随折叠菜单一起隐藏或错位。
- Logo 必须始终在
navbar-collapse外层，和navbar-toggler同级 - 如果要用自定义居中（比如绝对定位），必须加
position-relative到navbar，再对navbar-brand设position-absolute+left: 50%+transform: translateX(-50%) - 但该方式在移动端易与 toggler 按钮重叠，需手动加
z-index和top微调
自定义宽度 Logo 图片时，记得重设 navbar-brand 的 height
默认 navbar-brand 行高由字体决定，插入图片后若高度溢出或上下留白异常，需显式控制：
- 给
navbar-brand > img加height: 1.5rem（或2rem）并设object-fit: contain - 避免只设
width导致拉伸变形 - 若用背景图，改用
background-size: contain+background-repeat: no-repeat，并确保容器有固定height和width
真正麻烦的不是居中本身，而是不同断点下 flex 项的收缩行为、图片加载时机导致的布局抖动，以及和 navbar-toggler 的 z 轴竞争——这些细节往往在真机调试时才暴露。
