直接加 .justify-content-center 就能居中导航项，需确保 .navbar-nav 是 的直接子元素且启用 flex 布局；logo 居中需左右占位或 container-fluid + justify-content-between；图标文字不对齐应改用 align-items: center；折叠态需单独处理样式。
直接加 .justify-content-center 就能居中导航项
Bootstrap 4 的 .navbar-nav 默认是 flex 容器，所以最简单、最符合语义的居中方式就是给外层 <nav></nav> 加上 .justify-content-center 类。它会把所有子项（比如 <ul class="navbar-nav"></ul>）沿主轴水平居中，无需额外 CSS 或 hack。
常见错误现象：只给 <ul class="navbar-nav"></ul> 加 mx-auto，结果在小屏幕折叠后失效；或误用 text-align: center 作用于 <nav></nav>，但对 flex 子项无效。
- 必须确保
.navbar-nav是<nav></nav>的**直接子元素**，中间不能嵌套多余<div> <li>如果用了 <code>.navbar-expand-*（如.navbar-expand-md），该类已启用 flex 布局，.justify-content-center才能生效 - 不适用于折叠态（
.navbar-collapse展开时）——此时内容垂直堆叠，justify-content-center不起作用，需另加媒体查询处理 - 正确做法：左侧放一个空
<div class="navbar-nav me-auto"></div>，右侧放一个<div class="navbar-nav ms-auto"></div>，Logo 放中间并加mx-auto - 更干净的写法是用
<div class="container-fluid"> 包裹，并用 <code>justify-content-between+mx-auto组合控制 - 小屏幕折叠后，
.navbar-collapse会接管布局，此时 Logo 会回到顶部左对齐，需用@media (max-width: 991.98px)单独重置其样式 - 给包裹导航项和购物车图标的父容器（如
<div class="header-navigation">）加 <code>display: flex和align-items: center - 确保图标所在元素（如
<a class="nav-link"><i class="bi-cart"></i></a>）本身也设display: inline-flex或display: flex - 避免混用
vertical-align和 flex —— 一旦父容器启用了 flex，vertical-align就完全失效 - 不要试图用同一个 class 控制全部状态，必须区分
.navbar（未折叠）和.navbar-collapse（已折叠） - 折叠后若仍需居中，得单独给
.navbar-collapse .navbar-nav加text-align: center，再配合display: inline-block让<li>可居中 - 最易忽略的一点：折叠按钮（
.navbar-toggler）默认是margin-left: auto，它会挤占 Logo 空间，导致居中计算偏差
品牌 Logo 居中需要左右“占位”才能触发 mx-auto
想让 Logo 图片或文字在导航栏里视觉居中（尤其当左右都有菜单时），不能只靠 mx-auto。因为 mx-auto 在 flex 布局中只有在**存在左右两个同级兄弟元素**时，才会把中间项推到正中。
也就是说，如果你只写：<nav class="navbar navbar-expand-lg"><img src="logo.png" class="mx-auto"></nav>，它不会居中——浏览器没东西可“平衡”。
图标和文字不对齐？别调 line-height，改用 align-items: center
导航栏里图标（SVG / 字体图标）和文字总看起来一高一低，不是字体问题，是渲染机制差异：vertical-align 依赖 baseline，而 SVG viewBox 原点、字体 ascender 都不统一。
最稳定的做法是跳出 inline 流，把包含图标的整个容器设为 flex：
响应式下居中失效的本质原因
居中逻辑在桌面端有效，到了手机上就偏左或堆叠错位，根本不是 class 没加对，而是 Bootstrap 4 的响应式断点切换了布局模式：从 flex 水平排列 → 切换为 .navbar-collapse 的 block 垂直流。
这意味着所有基于 flex 的居中（justify-content-center、mx-auto、align-items）在折叠态下自动失效。
