当使用 flex 布局构建导航栏时，若需让标题（如 `
`）严格居中于整个屏幕（而非仅在其父容器中居中），需脱离 flex 主轴约束，改用绝对定位结合 `width: 100%` 和 `justify-content: center` 实现真正的视口级水平居中。
在典型的 Flex 导航栏结构中（如 display: flex; justify-content: space-between），所有子元素均受父容器主轴对齐规则约束——这意味着 <h1> 的 flex-grow: 1 仅使其“撑满剩余空间”，其视觉中心仍会因左右导航与按钮宽度不等而偏移，并非真正居中于视口。
要实现相对于屏幕的绝对水平居中，核心思路是：将标题从 Flex 流中抽离，赋予其独立的、覆盖全宽的定位上下文。推荐方案如下：
✅ 结构优化：新增一个 .nav-logo 容器，脱离 <header> 的 space-between 主轴流，采用 position: absolute 定位，并设置 width: 100%；
✅ 居中实现：对该容器启用 display: flex + justify-content: center + align-items: center，确保内部 <h1> 精确居中于视口宽度；
✅ 层级与尺寸控制：为避免遮挡，.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;
}<header>
<!-- 居中标题：独立于 Flex 布局，强制居中于视口 -->
<div class="nav-logo">
<h1>SalonM</h1>
</div>
<!-- 导航与按钮：按原逻辑分布 -->
<div class="nav-wrapper">
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<button>Button</button>
</div>
</header>⚠️ 注意事项：
- 绝对定位的 .nav-logo 会脱离文档流，需确保其 height 与父容器一致，避免高度塌陷；
- 若 <header> 本身无显式高度（如仅靠子元素撑开），建议为其设置 height: 100px 或 min-height；
- 响应式场景下，可配合 @media 查询调整 .nav-logo 的 font-size 或 padding，但 width: 100% + justify-content: center 天然适配所有屏幕宽度；
- 替代方案（如 transform: translateX(-50%) + left: 50%）虽可行，但需额外处理定位上下文，不如本方案语义清晰、维护性强。
总结：Flex 布局擅长容器内对齐，而视口级居中需跳出该范式——通过绝对定位创建全宽通道，再以 Flex 实现内部居中，是兼顾语义性、兼容性与可维护性的最佳实践。
