Bootstrap平板导航栏居中需三栏flex结构：左空.navbar-nav.me-auto、中.navbar-brand.mx-auto、右空.navbar-nav.ms-auto，并设.navbar宽度100%且用navbar-expand-md断点。
Bootstrap 默认的导航栏在平板（如 768–991px）上不会居中，因为 .navbar 是 display: flex 且 justify-content: flex-start，而 mx-auto 在单侧有内容时根本不会生效——不是你漏写类，是布局结构不满足 flex 居中前提。
为什么 text-center 或 mx-auto 在平板上无效
平板断点（md 和 lg）下，.navbar 仍为 flex 容器，但常见错误是只放一个 .navbar-brand 和一个 .navbar-nav，导致中间项没有“左右夹击”环境：mx-auto 只对非首/末的弹性子项起作用；text-center 对 flex 子项完全无效。浏览器不会把孤立的 .navbar-brand 当作可居中对象。
- 直接给
.navbar加text-align: center→ 仅影响内联文本，不影响.navbar-brand位置 - 只加
mx-auto到.navbar-brand→ 缺少左侧.navbar-nav.me-auto和右侧.navbar-nav.ms-auto，flex 引擎不触发居中逻辑 - 用
justify-content-center但没设width: 100%→.navbar默认不占满父容器宽度，居中范围为“收缩内容宽”，视觉上还是偏左
让导航栏在平板（md–lg）真正居中的结构写法
必须显式构造三栏 flex 结构，并限定断点作用域。核心是：左右占位 + 中间 mx-auto + 宽度撑满。
- 外层
<nav class="navbar navbar-expand-md">—— 确保在 ≥768px 时展开（不是lg），否则平板会进折叠态 -
<div class="navbar-nav me-auto"></div>放最左，哪怕为空，它会占据 flex 剩余空间并推走右侧 -
<div class="navbar-brand mx-auto">Logo</div>放中间，此时mx-auto才被识别为“居中项” -
<div class="navbar-nav ms-auto"></div>放最右，防止右侧导航或按钮挤偏 logo - 给
<nav>显式加style="width: 100%"或自定义类w-100，否则 flex 主轴无足够空间可分配
折叠态（offcanvas）下平板 Logo 偏左？补这两处
当用户手动展开移动端菜单（即 .offcanvas.show 激活）时，.offcanvas-body 默认是块级垂直流，mx-auto 失效，且若 .navbar-nav 还挂着 flex-grow-1，它会抢光宽度。
- 给
<div class="offcanvas-body">加justify-content-center—— 让其变成 flex 容器并居中所有直系子项 - 从
<ul class="navbar-nav">上移除flex-grow-1—— 它不该出现在 offcanvas 的 nav 列表中，否则会撑满整行 - 别依赖
text-center或d-flex套在.navbar-brand外层：如果父级是offcanvas-body且未设高度，align-items-center无基准可依
响应式断点别混用 sm 和 md
平板典型宽度是 768–991px，对应 Bootstrap 的 md 断点（≥768px）。若你用 navbar-expand-sm，则 576px 就展开，平板反而可能进折叠态；若用 navbar-expand-lg，则 992px 才展开，768–991px 区间会显示为折叠按钮+未展开内容，logo 自然无法居中。
- 正确写法：
navbar-expand-md—— 确保平板上导航是展开态，才能应用 flex 居中逻辑 - 避免在媒体查询里重复写
justify-content-center：Bootstrap 工具类已提供justify-content-md-center，但注意它只对.navbar直系子容器有效，不能替代三栏结构 - 检查 DevTools 的 computed
justify-content值：如果看到flex-start，说明结构没满足三栏前提，不是断点没命中
真正卡住人的从来不是类名拼错，而是 flex 布局对“同级子项存在性”的硬性要求——缺一个空 .navbar-nav，整个居中逻辑就失效。动手前先打开控制台看 DOM 层级，比反复试类更省时间。
