如何实现Logo居中的Flexbox头部？Flex新手求助

直接利用Flex布局的特性就能实现，核心思路是让头部容器内的左右元素占据等量剩余空间，从而把Logo推到视觉中心位置。

完整代码示例 #

HTML结构

<header class="header">
  <div class="header-left">
    <!-- 左侧自定义内容，比如导航链接 -->
    <a href="#">首页</a>
    <a href="#">服务</a>
  </div>
  <div class="header-logo">
    <img src="你的Logo路径" alt="网站Logo">
  </div>
  <div class="header-right">
    <!-- 右侧自定义内容，比如功能按钮 -->
    <a href="#">登录</a>
    <a href="#">注册</a>
  </div>
</header>

CSS样式

.header {
  display: flex;
  align-items: center; /* 垂直方向居中对齐 */
  padding: 0 20px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-left, .header-right {
  flex: 1; /* 关键：左右容器平分剩余空间 */
}

.header-left {
  text-align: left; /* 左侧内容左对齐 */
}

.header-right {
  text-align: right; /* 右侧内容右对齐 */
}

.header-logo img {
  height: 40px; /* 根据需求调整Logo尺寸 */
}

关键逻辑说明 #

• 头部容器设置display: flex和align-items: center，确保所有元素在垂直方向居中。
• 给左右容器添加flex: 1，二者会自动分配Logo以外的剩余空间，强制Logo处于头部中心。
• 通过text-align控制左右容器内内容的对齐方向，保证整体布局规整。

如果不需要左右内容，只想让Logo单独居中，代码可以简化为：

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

内容的提问来源于stack exchange，提问作者emplar777