Bootstrap 5 中 navbar-nav 居中需直接为 ul.navbar-nav 添加 justify-content-center 类，确保其为 nav.navbar 的直接子元素且无 container 限制宽度；Offcanvas 下须移除 flex-grow-1 并对 offcanvas-body 应用 justify-content-center；Bootstrap 3 则需自定义 CSS 覆盖浮动并启用 flex。
Bootstrap 5 中 navbar-nav 居中：直接加 justify-content-center 就行
在非折叠状态（即大屏展开时），navbar-nav 是 nav 的直接子元素，而 nav.navbar 默认是 flex 容器。只要确保父容器没有干扰性样式，给 navbar-nav 加上 justify-content-center 就能居中其内部的 li.nav-item。
但注意：这个类必须加在 ul.navbar-nav 上，不是加在 nav 或 div.container 上——否则无效。
-
ul.navbar-nav必须是nav.navbar的直接子元素（不能套多一层div） - 如果用了
.container包裹navbar-nav，它会限制宽度，导致居中“看起来偏左”——此时应改用.container-fluid或移除容器 - 不要同时加
ms-auto me-auto，它和justify-content-center冲突，后者优先级更高但逻辑不一致
Offcanvas 模式下 navbar-nav 居中失败？关键在 flex-grow-1
当使用 Bootstrap 5 的 offcanvas 导航栏时，ul.navbar-nav 默认被加上了 flex-grow-1，这会让它撑满整个 offcanvas-body 宽度，导致即使父容器设了 justify-content-center，也无空间可居中。
解决方法很明确：移除 flex-grow-1，再对 offcanvas-body 应用 justify-content-center。
- 检查 HTML 中
ul.navbar-nav是否带flex-grow-1—— 它常由某些模板或 JS 自动注入 - 在
offcanvas-body上显式添加justify-content-center类（它本身已是 flex 容器） - 若还存在多个子元素（比如
ul.navbar-nav+form），它们会并排居中；如只需居中导航项，可把其他元素用ms-auto推到右侧
Bootstrap 3 怎么让 navbar-nav 居中？别碰原始 CSS
Bootstrap 3 的 .navbar-nav 依赖 float: left，原生不支持 flex。强行加 text-align: center 到父容器只对内联元素有效，对浮动列表无效。
正确做法是用自定义 CSS 覆盖，并确保它加载在 Bootstrap 样式之后：
- 新建
custom.css，在<link href="bootstrap.min.css">之后引入 - 写规则：
.navbar-nav { display: flex; justify-content: center; }，再重置li的浮动：.navbar-nav > li { float: none; } - 务必加
@media查询，在小屏下关掉 flex，避免破坏折叠菜单逻辑（例如@media (max-width: 767px) { .navbar-nav { display: block; } }）
为什么加了 justify-content-center 还是不居中？先查这三处
大部分“加了没用”问题都出在结构或干扰类上，而不是类名写错。
- 浏览器开发者工具里选中
ul.navbar-nav，看 computed 样式中justify-content是否为center；如果不是，说明被其他规则覆盖（比如某个父级设了justify-content: flex-start） - 检查是否误给
ul.navbar-nav加了w-100或flex-fill—— 它们会让元素强制占满，挤掉居中空间 - 确认没有在
nav或navbar-collapse上加text-center：这个类只影响文本对齐，对 flex 子项无效，反而容易误导排查方向
navbar-nav 的宽度“收回来”——它太胖，再怎么居中也没用。这点在 offcanvas 和 container 套用场景里最容易被忽略。 
