Bootstrap折叠时.navbar-brand水平居中且垂直不偏移如何实现

两个异常的诱因非常明确：

1. 你在导航栏标签上加了多余的pb-3内边距类，破坏了Bootstrap默认的导航栏内边距规则，直接导致小屏高度和默认值不一致；同时折叠菜单属于正常文档流，展开/收起时会改变父容器高度，你之前写的绝对定位logo没有设置垂直定位基准，会随父容器高度变化上下偏移。
2. 没有给logo的直接父级设置明确的定位上下文，也没有给logo设置垂直方向的定位规则，定位参考混乱。

不需要硬编码导航栏高度，按以下两步修改即可实现和官方一致的效果：

1. 清理冗余class：删掉nav标签上的pb-3，同时删掉navbar-brand上无效的justify-content-center（该类仅对display为flex的元素生效，navbar-brand默认不是flex容器，加了无实际作用）。
2. 替换原有自定义CSS为以下代码，断点使用Bootstrap官方的lg临界值991.98px，避免缩放时的样式跳变：

@media (max-width: 991.98px) {
  /* 采用Bootstrap官方lg断点阈值，避免992px临界值下浏览器缩放导致的样式跳变 */
  .navbar > .container-lg {
    position: relative;
  }
  .navbar-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

• 删掉多余的pb-3后，导航栏会自动继承Bootstrap预设的响应式内边距和默认高度，不需要手动写min-height硬编码，对不同尺寸的品牌图、切换按钮适配性更好。
• 给logo的直接父容器.container-lg设置position: relative，明确绝对定位的参考对象是导航栏的容器层，不会被其他元素干扰。
• 给logo加上top: 50%和垂直方向的偏移，让logo始终相对于容器垂直居中，不管折叠菜单展开还是收起，logo的位置都完全固定，不会出现上下偏移。

修改后的核心导航栏代码参考：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
  <div class="container-lg">
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <a class="navbar-brand" href="#">
      <img
        src="https://img.icons8.com/color/480/firebase.png"
        alt="Company"
        width="40"
        height="40"
      />
    </a>

    <div class="collapse navbar-collapse" id="navbarNav">
      <div class="navbar-nav navbar-nav-scroll">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">About</a>
        <a class="nav-link" href="#">Careers</a>
        <a class="nav-link" href="#">Contact</a>
      </div>
    </div>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者Raul