当使用 `display: flex` 的导航栏中需让标题（如 `
`）严格居中于整个屏幕（而非 `` 内部），常规的 `justify-content: center` 无效时，可通过绝对定位 + 宽度撑满的独立容器实现真正的视口级水平居中。在现代 CSS 布局中，「水平居中」常被误解为「在父容器中居中」，但本例明确要求 相对于整个视口（viewport）居中——即无论左侧导航或右侧按钮宽度如何变化，<h1> 始终位于屏幕正中央。由于 <header> 使用了 justify-content: space-between，其子元素（<nav>、<h1>、<button>）会被强制分布到两端与中间，此时 <h1> 实际是「在 <header> 的剩余空间中居中」，而非全屏居中。
✅ 正确解法：分离定位上下文
将 <h1> 移出 Flex 主轴流，用独立的 .nav-logo 容器配合 position: absolute 实现视口级居中：
.nav-logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* 或设为 header 高度（如 100px） */
display: flex;
justify-content: center;
align-items: center;
pointer-events: none; /* 可选：避免遮挡下方交互元素 */
}
.nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2%;
height: 100px;
position: relative; /* 确保 .nav-logo 相对于此定位 */
}<header>
<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>⚠️ 注意事项：
- 必须为 <header> 或 .nav-wrapper 设置 position: relative，否则 absolute 定位会相对于 <body> 或最近定位祖先，导致偏移；
- 若 <header> 高度不固定，建议用 height: 100% 配合 align-items: center，或通过 JS 动态同步高度；
- 添加 pointer-events: none 到 .nav-logo 可防止 <h1> 遮挡下方 <nav> 或 <button> 的点击区域（若无需交互可忽略）；
- 替代方案（更现代）：使用 inset: 0 + margin: auto（需同时设宽高），或 CSS Grid 配合 place-items: center，但兼容性略低于本方案。
总结：Flex 布局中的「父容器内居中」与「视口级居中」本质不同。当需求明确指向后者时，应主动脱离 Flex 流式上下文，借助定位或 Grid 等机制重建居中锚点——这是语义清晰、兼容稳健且易于维护的实践路径。
在现代 CSS 布局中，「水平居中」常被误解为「在父容器中居中」，但本例明确要求 相对于整个视口（viewport）居中——即无论左侧导航或右侧按钮宽度如何变化，<h1> 始终位于屏幕正中央。由于 <header> 使用了 justify-content: space-between，其子元素（<nav>、<h1>、<button>）会被强制分布到两端与中间，此时 <h1> 实际是「在 <header> 的剩余空间中居中」，而非全屏居中。
✅ 正确解法：分离定位上下文
将 <h1> 移出 Flex 主轴流，用独立的 .nav-logo 容器配合 position: absolute 实现视口级居中：
.nav-logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* 或设为 header 高度（如 100px） */
display: flex;
justify-content: center;
align-items: center;
pointer-events: none; /* 可选：避免遮挡下方交互元素 */
}
.nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2%;
height: 100px;
position: relative; /* 确保 .nav-logo 相对于此定位 */
}<header>
<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>⚠️ 注意事项：
- 必须为 <header> 或 .nav-wrapper 设置 position: relative，否则 absolute 定位会相对于 <body> 或最近定位祖先，导致偏移；
- 若 <header> 高度不固定，建议用 height: 100% 配合 align-items: center，或通过 JS 动态同步高度；
- 添加 pointer-events: none 到 .nav-logo 可防止 <h1> 遮挡下方 <nav> 或 <button> 的点击区域（若无需交互可忽略）；
- 替代方案（更现代）：使用 inset: 0 + margin: auto（需同时设宽高），或 CSS Grid 配合 place-items: center，但兼容性略低于本方案。
总结：Flex 布局中的「父容器内居中」与「视口级居中」本质不同。当需求明确指向后者时，应主动脱离 Flex 流式上下文，借助定位或 Grid 等机制重建居中锚点——这是语义清晰、兼容稳健且易于维护的实践路径。
