bootstrap 5 中 navbar-brand 居中需满足 flex 三要素：父容器为 flex，且左右两侧均有同级子项（可为空），否则 mx-auto 不生效；justify-content-between 失效多因 navbar 未设 width: 100%；移动端导航换行需加 flex-wrap: wrap；bootstrap 3 不支持 flex 工具类，须改用 display: flex 或 text-align: center + inline-block；垂直对齐应使用 align-items-center 而非 text-center。
Bootstrap 5 中 navbar-brand 居中需满足 flex 三要素
单纯给 navbar-brand 加 mx-auto 不生效，是因为它不是独立 flex 项目——必须确保其父容器是 flex，且左右两侧都有同级 flex 子项（哪怕为空）。navbar 默认是 display: flex，但若只放 navbar-brand 和 navbar-nav，而 navbar-nav 又用了 ms-auto，那 navbar-brand 就只剩“左对齐”一个选项。
正确结构要显式拆出左、中、右三块：
-
<div class="navbar-nav me-auto"></div>—— 占位左侧导航区（可空） -
<a class="navbar-brand mx-auto"></a>—— 居中 Logo（必须在中间位置） -
<div class="navbar-nav ms-auto"></div>—— 占位右侧导航区（可空）
缺任意一块，mx-auto 都不会触发居中逻辑。浏览器 flex 布局只在“多个等权子项共存”时才把 mx-auto 当作居中依据。
justify-content-between 失效？检查 width 和 flex-wrap
用 justify-content-between 想让 Logo 左、导航项右，结果全挤在左边——大概率是 navbar 容器没撑满视口宽度。Bootstrap 的 navbar 默认不设 width: 100%，尤其嵌套在 container 或带 padding 的 wrapper 里时，flex 容器会“收缩包裹”，justify-content 就失去作用范围。
解决方法很直接：
- 给
nav.navbar显式加style="width: 100%"，或自定义类.w-100 - 确认没有父级元素设置
overflow: hidden或max-width截断了 flex 主轴 - 移动端展开后导航项换行错乱？加
flex-wrap: wrap到navbar-nav，否则超长菜单会被压缩甚至溢出
Bootstrap 3 用户别碰 justify-content-center
Bootstrap 3 的 .navbar-nav 是浮动布局（float: left），压根不识别 flex 工具类。强行加 justify-content-center 没效果，还可能因 CSS 优先级冲突导致其他样式异常。
可靠做法只有两个：
- 给
.navbar-nav加自定义 CSS：display: flex; justify-content: center;，并移除所有float相关规则（包括.navbar-left/.navbar-right） - 用
text-align: center配合display: inline-block：给.navbar-header设text-align: center，再给.navbar-nav设display: inline-block，适用于纯文字菜单
注意：后者在响应式折叠后会失效，必须配合媒体查询重置为 block。
Logo 和导航项垂直对齐不齐？别用 text-center
给 navbar 加 text-center 想让 Logo 和链接上下居中，结果毫无反应——因为 text-align 只控制内联内容的**文本对齐**，对 flex 子项（navbar-brand、nav-link）完全无效。
垂直居中靠的是 flex 的 align-items：
- 整个导航栏垂直居中：给
nav.navbar加align-items-center - 仅 Logo 与相邻文字对齐：确保
navbar-brand和nav-link的line-height、padding-top/bottom一致 - 图标下沉？
img标签默认vertical-align: baseline，加align-text: middle或直接设vertical-align: -.125em（Bootstrap Icons 已内置）
真正容易被忽略的是：当 navbar-brand 包含 img 时，它的高度由图片原始尺寸决定，而 nav-link 高度由 padding 和 line-height 决定——两者不一致，align-items-center 就只是“按中心线对齐”，不是“看起来一样高”。
