当使用 `display: flex` 的导航栏中需让标题（如 `

`）严格居中于整个屏幕（而非仅 header 内部），不能依赖 `justify-content: space-between` 下的 `flex-grow`，而应通过绝对定位或脱离文档流的方式实现真正的视口级居中。

在典型的 Flex 导航栏结构中（如 header { display: flex; justify-content: space-between }），三个子元素——左侧导航、中间标题、右侧按钮——会按顺序分配空间。此时即使为

设置 text-align: center 或 flex-grow: 1，它也仅在剩余可用空间内居中，其实际位置仍受左右元素宽度影响，并非真正相对于视口（viewport）水平居中。

要实现「标题始终位于屏幕正中央」，核心思路是：让标题脱离 Flex 主轴的布局约束，直接基于视口定位。推荐方案如下：

✅ 推荐解法：绝对定位 + 宽度覆盖

header {   position: relative; /* 为绝对定位提供参照 */   display: flex;   justify-content: space-between;   align-items: center;   padding: 0 2%;   height: 80px; /* 显式高度便于垂直居中 */ }  .nav-logo {   position: absolute;   left: 0;   top: 0;   width: 100%;   height: 100%;   display: flex;   justify-content: center;   align-items: center;   pointer-events: none; /* 避免遮挡下方 nav/button 的交互 */ }  .nav-logo h1 {   margin: 0;   font-size: 1.5rem;   pointer-events: auto; /* 恢复标题自身可交互性（如点击） */ }

       
     
SalonM
   
    Button 

? 关键点说明：.nav-logo 使用 position: absolute 脱离 Flex 流，宽度设为 100% 并 justify-content: center，确保 始终居中于整个视口宽度；pointer-events: none 是重要细节：避免绝对定位层阻挡下方 和 的鼠标事件（如点击菜单项或按钮）；height: 100% 与 align-items: center 结合，自然实现垂直居中，无需额外计算 top: 50% + transform。

⚠️ 注意事项

• 不要对
  

  直接设置 position: absolute（除非你手动处理宽高与层级），否则易引发响应式错位或交互阻断；

• 若需支持旧版浏览器（如 IE11），可改用 transform: translateX(-50%) 配合 left: 50%，但需确保父容器 position: relative；
• 在移动端，建议配合 @media 为小屏调整 padding 和 font-size，保持视觉平衡。

该方案兼顾语义清晰性（

保留在 dom 正常流中）、布局鲁棒性（不受左右元素宽度波动影响）与交互完整性，是现代 css 中实现「视口级水平居中」的可靠实践。