怎么在Bootstrap4导航栏中用CSS实现Logo居中两侧对齐？-css教程-PHP中文网

用justify-content-center会使Logo居中但菜单全挤中间，破坏左/右对齐结构；正确做法是将.navbar-brand设为position: absolute + left: 50% + transform: translateX(-50%)，使其脱离flex流，再通过padding预留空间并设置z-index避免遮挡。

怎么在bootstrap4导航栏中用css实现logo居中两侧对齐？

用 `justify-content-center` 会让 Logo 居中但破坏两侧导航项对齐

Bootstrap 4 的 .navbar 默认是 flex 布局，直接给 .navbar-nav 加 justify-content-center 看似能居中 Logo，但会导致左侧和右侧的菜单项（比如登录/注册）全部挤到中间，失去“左对齐+右对齐”的结构。真正要的是：Logo 单独居中，左侧菜单左对齐，右侧菜单右对齐——这需要脱离默认的单行 flex 排列逻辑。

正确做法：把 Logo 单独提为 `position-absolute` + 手动居中

Bootstrap 4 的 .navbar 容器有固定高度（如 4rem），且默认 position: relative，这给了我们用绝对定位的条件。关键点在于：

给 .navbar-brand（Logo）加 position: absolute 和 left: 50%，再用 transform: translateX(-50%) 精确居中
确保 .navbar-brand 不参与 flex 流，所以得加 flex: 0 0 auto 或直接移出 .navbar-nav 结构
左右两侧的 .navbar-nav 需要留出足够空间，避免被 Logo 遮挡——通常靠 padding-left 和 padding-right 撑开

示例 HTML 结构：

<nav class="navbar navbar-expand-md"><div class="navbar-nav mr-auto"><a class="nav-link" href="#">首页</a></div>
  <a class="navbar-brand" href="#">MyLogo</a>
  <div class="navbar-nav ml-auto"><a class="nav-link" href="#">登录</a></div>
</nav>

对应 CSS：

.navbar-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
}

响应式下 Logo 居中会失效？检查 `navbar-expand-*` 断点是否覆盖了你的设备宽度

Bootstrap 4 的 .navbar-expand-md 表示在 md（768px）及以上才启用 flex 布局；小屏幕会折叠为汉堡菜单。如果你在平板（如 768px）边缘测试，可能刚好卡在断点临界值，导致 Logo 绝对定位后位置偏移或重叠。解决方法：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

把 .navbar-expand-md 改成 .navbar-expand-lg 或 .navbar-expand-xl，扩大 flex 启用范围
或者，在小屏下主动隐藏 Logo 的绝对定位，改用默认流式布局：@media (max-width: 767.98px) { .navbar-brand { position: static; transform: none; } }
注意：.navbar-brand 的 z-index 应设为高于其他元素（如 z-index: 1000），否则折叠菜单弹出时可能被遮住