Bootstrap navbar-brand 无法直接居中，因navbar为flex布局且justify-content: flex-start；需用me-auto/ms-auto配合mx-auto，辅以媒体查询处理折叠态居中。
Bootstrap 默认的 navbar-brand 无法直接居中，必须打破默认的 flex 布局结构或覆盖其对齐逻辑。
为什么 text-center 或 mx-auto 在 navbar-brand 上无效
因为 Bootstrap 5 的 .navbar 是 display: flex，且 .navbar-brand 默认是第一个子元素，受 justify-content: flex-start 控制；mx-auto 对 flex 项目生效的前提是它不是唯一/首个非空白项，而 .navbar-nav 和 .navbar-brand 同级，自动占位会破坏居中。
- 加
text-center到父容器（如.navbar）只影响内联内容，不改变 flex 子项位置 -
mx-auto在.navbar-brand上不起作用，除非它被设为margin-inline: auto且父容器允许弹性分配剩余空间——但默认 navbar 没有显式设置flex: 1给中间区域 - 用
position: absolute硬定位容易脱离流、响应失效、遮挡其他元素
推荐方案：用 order + flex-grow 拆分导航结构
核心思路是把 navbar 拆成三栏：左导航（可空）、居中 logo、右导航（可空），利用 flex 的 order 和 flex-grow 实现视觉居中，同时保持语义和响应性。
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<!-- 左侧导航（可选）-->
<div class="navbar-nav me-auto">
<a class="nav-link" href="#">首页</a>
</div>
<pre class='brush:php;toolbar:false;'><!-- 居中 Logo -->
<a class="navbar-brand mx-auto" href="#">
<img src="logo.png" style="max-width:90%" alt="Logo">
</a>
<!-- 右侧导航（可选）-->
<div class="navbar-nav ms-auto">
<a class="nav-link" href="#">登录</a>
</div></div> </nav>
-
me-auto让左侧 nav 尽可能靠左并“推走”右侧内容 -
mx-auto在.navbar-brand上生效，是因为左右两侧都存在且为 flex 项目，此时浏览器会将中间项视作可居中对象 - 必须确保左右两侧都有内容（哪怕为空
<div class="navbar-nav me-auto"></div>），否则mx-auto仍不触发 - 在小屏幕折叠时，
.navbar-collapse会接管布局，需额外处理（见下一点）
折叠后 Logo 居中失效？用 @media 补充控制
当 navbar 折叠（.navbar-collapse 展开）时，所有内容垂直堆叠，mx-auto 失效。需要单独针对折叠态重置 logo 样式：
<style>
@media (max-width: 991.98px) {
.navbar-brand {
margin: 0 auto;
display: block;
text-align: center;
}
}
</style>- 不要依赖
text-center在父容器上——折叠后父容器是.navbar-collapse，它本身是块级，text-center不影响子元素块级居中 - 必须加
display: block，否则text-align对<a>这类 inline 元素才有效 - 如果用了
navbar-dark或自定义颜色，注意text-align不影响图片，需确保<img>也居中（默认 inline，会被text-align: center影响）
真正麻烦的是多级响应场景：比如 logo 在桌面端居中、平板横屏偏左、竖屏又居中——这时候不能只靠 Bootstrap 工具类，得写明确的断点规则，且优先级要压过框架默认样式。别省略 !important 在调试阶段，但上线前应改用更具体的选择器替代。
