Bootstrap 导航栏居中需确保 .navbar 下子元素为同级直系结构：.navbar-nav、.navbar-brand 和搜索 form 必须并列，删掉包裹容器及 ms-auto/me-auto/flex-grow-1；小屏需单独用媒体查询处理 .navbar-collapse 内居中。
Bootstrap 导航栏默认左对齐，想居中必须打破默认 flex 布局的“左对齐惯性”——关键不是加 text-center，而是让 .navbar 成为真正的 flex 居中容器，并确保子元素不抢空间。
给 .navbar 加 d-flex justify-content-center 不生效？检查子结构
常见错误是直接在 <nav class="navbar"> 上加 justify-content-center，但内部结构仍是 <div class="container"><ul class="navbar-nav">...</ul></div>。此时 .container 是唯一子元素，flex 居中无参照对象。
- 删掉包裹
.navbar-nav的.container或.container-fluid（或让它也设为d-flex） - 确保
.navbar-nav和搜索表单（如<form class="d-flex">）是<nav>的**同级直系子元素**，不要嵌套在额外<div>里 - 禁用
ms-auto、me-auto、flex-grow-1—— 它们会把剩余空间占满，挤掉居中所需的“自由空间”
.navbar-brand 居中要用三栏结构，不是 mx-auto 单打独斗
mx-auto 在 .navbar-brand 上失效，根本原因是它没有左右“陪衬”：flex 布局只在多个同级子项共存时才识别 auto 为居中依据。
- 正确结构必须显式拆出左、中、右三块：
<div class="navbar-nav me-auto"></div>（左区，可空）、<a class="navbar-brand mx-auto">Logo</a>（中区）、<div class="navbar-nav ms-auto"></div>（右区，可空） - 三者必须是
<nav>的直接子元素，不能被<div class="collapse">或其他 wrapper 包裹 - 小屏折叠后，
.navbar-collapse内部默认垂直堆叠，此时mx-auto失效，需单独用@media (max-width: 767.98px)给.navbar-brand加margin: 0 auto或text-align: center
图标和文字混排时垂直居中失效？别调 line-height，用 align-items: center
文字菜单项和购物车图标看起来一高一低，不是字体问题，而是 vertical-align: baseline 在作祟——SVG、图片、文本基线天然不一致。
- 把整个头部外层容器（比如
<header class="header-navigation">）设为display: flex; align-items: center - 确保
.main-navigation和.site-header-cart是它的**直接子元素**，中间不能插<div> - 删掉所有
vertical-align相关样式（包括 Bootstrap Icons 自带的-0.125em），flex 下它们完全多余 - 用
gap控制间距，比margin更稳定，不塌陷也不受兄弟元素影响
Offcanvas 小屏下搜索框/导航项仍靠左？重点修 .offcanvas-body
折叠菜单展开后，.offcanvas-body 默认是 flex-start，justify-content-center 加在父级 .offcanvas 上无效。
- 必须给
.offcanvas-body直接加justify-content-center类 - 检查里面有没有
flex-grow-1的.navbar-nav—— 有就删，否则它会撑满整行，把搜索框挤到边缘 - 确保搜索
<form>和<ul class="navbar-nav">是.offcanvas-body的**同级子元素**，不要包在另一个<div>里 - 如果用了自定义 offcanvas 结构，确认没覆盖
.offcanvas-body { display: flex }
真正卡住的点往往不在 CSS 写法本身，而在 DOM 层级是否“干净”——多一层 <div>、多一个 flex-grow-1、或者忘了删 ms-auto，都会让居中逻辑彻底失效。调试时优先用 DevTools 检查元素是否真是 flex 容器的直接子项，而不是猜样式。
