使用原生CSS实现导航栏不等宽三元素布局 logo相对容器居中

偏移原因 #

原有flex+margin: 0 auto实现出现偏移的核心逻辑：Flex布局下auto外边距只会分配容器内的剩余空白空间，当左右两侧导航、图标区宽度不相等时，logo两侧分到的空白宽度不对等，最终logo仅会停在左右两个元素的中间位置，无法对齐整个导航容器的水平中线。

最优实现方案（无hack、原生CSS、响应式） #

使用CSS Grid三列等宽布局是最规范的实现方式，不需要新增任何额外DOM占位元素，逻辑清晰适配性强：

1. 将导航容器改为三列等宽网格，三个直接子元素（左侧导航、logo、右侧图标区）各占1/3容器宽度
2. 分别给三个子元素设置对应对齐规则：左侧导航居左、logo居中、右侧图标区居右
3. 重置浏览器默认的列表样式，避免自带边距干扰对齐

完整修改后CSS代码 #

.nav {
  display: grid;
  /* 定义三等分列，三个子元素各占1/3容器宽度 */
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border: 2px solid red;
  width: 100%;
}

.nav__list--primary {
  gap: 1.5rem;
  /* 左侧导航居左对齐 */
  justify-self: start;
  /* 重置列表默认边距 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list--secondary {
  gap: 6rem;
  border: 1px solid blue;
  /* 右侧图标区居右对齐 */
  justify-self: end;
  /* 重置列表默认边距 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar__item--icon {
  margin-top: 0.5rem;
}

.logo {
  /* Logo在自身列内水平居中，始终对齐容器中线 */
  justify-self: center;
}

header {
  margin-bottom: 6rem;
}

/* 原有.row的flex布局规则可直接保留，无需修改 */
.row {
  display: flex;
}

方案优势 #

• 无冗余DOM：不需要加不可见占位元素，符合语义化规范
• 自适应能力强：无论左右两侧内容宽度如何变化、视口尺寸如何调整，logo始终相对整个导航容器水平居中
• 兼容性好：支持所有现代浏览器，覆盖98%以上的全球用户场景

不推荐用绝对定位实现该效果：绝对定位会让logo脱离文档流，小屏幕下容易遮挡左右两侧导航内容，响应式适配需要写大量额外覆盖规则。

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