哈喽！今天心血来潮给大家带来了《Flex 布局实现视口水平居中方法》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

当使用 `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; /* 恢复标题自身可交互性（如点击） */
}

<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，确保

  始终居中于整个视口宽度；

• 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 中实现「视口级水平居中」的可靠实践。

以上就是《Flex布局实现水平居中技巧》的详细内容，更多关于的资料请关注golang学习网公众号！

前往漫画官网入口并下载 ➜

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问