当使用 `display: flex` 的导航栏中需让标题（如 `
`）严格居中于整个屏幕（而非仅 header 内部），不能依赖 `justify-content: space-between` 下的 `flex-grow`，而应通过绝对定位或脱离文档流的方式实现真正的视口级居中。
在典型的 Flex 导航栏结构中（如 header { display: flex; justify-content: space-between }），三个子元素——左侧导航、中间标题、右侧按钮——会按顺序分配空间。此时即使为 <h1> 设置 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; /* 恢复标题自身可交互性（如点击） */
}<header>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<div class="nav-logo">
<h1>SalonM</h1>
</div>
<button>Button</button>
</header>? 关键点说明：.nav-logo 使用 position: absolute 脱离 Flex 流，宽度设为 100% 并 justify-content: center，确保 <h1> 始终居中于整个视口宽度；pointer-events: none 是重要细节：避免绝对定位层阻挡下方 <nav> 和 <button> 的鼠标事件（如点击菜单项或按钮）；height: 100% 与 align-items: center 结合，自然实现垂直居中，无需额外计算 top: 50% + transform。
⚠️ 注意事项
- 不要对 <h1> 直接设置 position: absolute（除非你手动处理宽高与层级），否则易引发响应式错位或交互阻断；
- 若需支持旧版浏览器（如 IE11），可改用 transform: translateX(-50%) 配合 left: 50%，但需确保父容器 position: relative；
- 在移动端，建议配合 @media 为小屏调整 padding 和 font-size，保持视觉平衡。
该方案兼顾语义清晰性（<h1> 保留在 DOM 正常流中）、布局鲁棒性（不受左右元素宽度波动影响）与交互完整性，是现代 CSS 中实现「视口级水平居中」的可靠实践。
