添加按钮后导航栏左移，如何确保导航始终居中？

关于你用position:absolute的方法 #

这个方法能实现视觉上的居中，但存在明显缺陷：

• 元素脱离文档流，若.nav-links高度超过nav，会超出导航栏范围，破坏整体布局；
• 当页面缩放、logo/按钮宽度变化时，.nav-links很容易和左右元素重叠，稳定性差。

推荐的Flex布局方案（更可靠） #

利用Flex容器的空间分配特性，让左右元素平分剩余空间，中间导航链接自动居中，且所有元素都在文档流内。修改后的CSS如下：

nav {
  display: flex;
  align-items: center;
  /* 移除原来的justify-content: space-between */
}

.logo, .nav-buttons {
  flex: 1; /* 让左右元素平分nav容器的剩余空间 */
}

.logo {
  color: white;
  text-align: left; /* 保持logo左对齐 */
}

.nav-buttons {
  text-align: right; /* 保持按钮组右对齐 */
}

nav li {
  display: inline-block;
  margin: 0 15px;
  list-style: none;
}

nav a {
  text-decoration: none;
  color: white;
}

/* 删除你原来的absolute相关样式 */
/* .nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
} */

原理

• flex:1让.logo和.nav-buttons自动分配nav中除.nav-links外的所有空间，且两者宽度始终相等；
• 配合text-align控制左右元素的对齐方向，中间的.nav-links自然处于容器正中央；
• 添加/删除按钮时，左右元素的空间会自动调整，中间导航链接的位置始终保持居中，不会偏移，同时导航栏高度会自适应内容。

简化替代方案 #

如果希望logo紧贴左侧、按钮紧贴右侧，同时中间导航链接居中，也可以用margin: 0 auto实现：

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  margin: 0 auto; /* 在剩余空间中自动居中 */
}

/* 其他样式保持不变 */

这个方案代码改动更小，同样能满足需求，且避免了absolute的问题。

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