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

`）严格居中于整个屏幕（而非 `

` 内部），常规的 `justify-content: center` 无效时，可通过绝对定位 + 宽度撑满的独立容器实现真正的视口级水平居中。

在现代 CSS 布局中，「水平居中」常被误解为「在父容器中居中」，但本例明确要求 相对于整个视口（viewport）居中——即无论左侧导航或右侧按钮宽度如何变化，

始终位于屏幕正中央。由于

使用了 justify-content: space-between，其子元素（

⚠️ 注意事项：

• 必须为
  或 .nav-wrapper 设置 position: relative，否则 absolute 定位会相对于 或最近定位祖先，导致偏移；
• 若
  高度不固定，建议用 height: 100% 配合 align-items: center，或通过 JS 动态同步高度；
• 添加 pointer-events: none 到 .nav-logo 可防止

  遮挡下方

• 替代方案（更现代）：使用 inset: 0 + margin: auto（需同时设宽高），或 CSS Grid 配合 place-items: center，但兼容性略低于本方案。

总结：Flex 布局中的「父容器内居中」与「视口级居中」本质不同。当需求明确指向后者时，应主动脱离 Flex 流式上下文，借助定位或 Grid 等机制重建居中锚点——这是语义清晰、兼容稳健且易于维护的实践路径。