当使用 flex 布局构建导航栏时，若需让标题（如 `

`）严格居中于整个屏幕（而非仅在其父容器中居中），需脱离 flex 主轴约束，改用绝对定位结合 `width: 100%` 和 `justify-content: center` 实现真正的视口级水平居中。

在典型的 Flex 导航栏结构中（如 display: flex; justify-content: space-between），所有子元素均受父容器主轴对齐规则约束——这意味着

的 flex-grow: 1 仅使其“撑满剩余空间”，其视觉中心仍会因左右导航与按钮宽度不等而偏移，并非真正居中于视口。

要实现相对于屏幕的绝对水平居中，核心思路是：将标题从 Flex 流中抽离，赋予其独立的、覆盖全宽的定位上下文。推荐方案如下：

✅ 结构优化：新增一个 .nav-logo 容器，脱离

的 space-between 主轴流，采用 position: absolute 定位，并设置 width: 100%；
✅ 居中实现：对该容器启用 display: flex + justify-content: center + align-items: center，确保内部

精确居中于视口宽度；
✅ 层级与尺寸控制：为避免遮挡，.nav-logo 应设固定高度（如 100px），并与 .nav-wrapper 高度一致，同时通过 z-index（可选）确保显示优先级。

body {
  margin: 0;
  padding: 0;
}

/* 全宽居中容器：脱离 Flex 流，覆盖整个视口宽度 */
.nav-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px; /* 与 header 高度一致 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10; /* 确保置于导航内容之上 */
}

/* 原有导航布局保持不变 */
.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2%;
  height: 100px;
  position: relative; /* 为 .nav-logo 提供定位参考（可选） */
}

nav, ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  margin-right: 10px;
}

h1 {
  margin: 0;
  font-size: 1.5rem;
}

button {
  display: inline-block;
}

  
  
    
SalonM
  

  
  
    
    Button
  

⚠️ 注意事项：

• 绝对定位的 .nav-logo 会脱离文档流，需确保其 height 与父容器一致，避免高度塌陷；
• 若
  本身无显式高度（如仅靠子元素撑开），建议为其设置 height: 100px 或 min-height；
• 响应式场景下，可配合 @media 查询调整 .nav-logo 的 font-size 或 padding，但 width: 100% + justify-content: center 天然适配所有屏幕宽度；
• 替代方案（如 transform: translateX(-50%) + left: 50%）虽可行，但需额外处理定位上下文，不如本方案语义清晰、维护性强。

总结：Flex 布局擅长容器内对齐，而视口级居中需跳出该范式——通过绝对定位创建全宽通道，再以 Flex 实现内部居中，是兼顾语义性、兼容性与可维护性的最佳实践。