如何让Logo在Header中居中并与导航链接水平垂直对齐？

1. 先调整HTML结构 #

把左导航、Logo、右导航放在同一个容器（比如header_main）内，结构顺序按左导航 → Logo → 右导航排列，保证视觉流和布局逻辑一致：

<header>
  <div class="header_main">
    <!-- 左侧导航 -->
    <ul class="nav-left">
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
    </ul>
    <!-- Logo容器 -->
    <div class="logo">
      <img src="你的Logo路径" alt="品牌Logo">
    </div>
    <!-- 右侧导航 -->
    <ul class="nav-right">
      <li><a href="#">关于</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </div>
</header>

2. 用Flexbox实现对齐（推荐，现代浏览器友好） #

Flexbox是最适合这种布局的方案，能轻松搞定水平分布和垂直居中，完全替代复杂的float逻辑：

.header_main {
  display: flex;
  align-items: center; /* 强制所有元素垂直居中 */
  justify-content: space-between; /* 左右导航贴边，Logo自动居中 */
  width: 100%;
  padding: 10px 20px; /* 给Header加内边距，避免内容贴边 */
  box-sizing: border-box; /* 防止padding撑开容器宽度 */
}

/* 清除之前的float样式 */
.nav-left, .nav-right {
  float: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.logo img {
  max-height: 50px; /* 限制Logo高度，避免超出Header */
}

如果需要Logo严格处于页面正中心（不受左右导航宽度影响），可以修改容器的justify-content，再给导航加自动外边距：

.header_main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
}

.nav-left {
  margin-right: auto; /* 把左导航推到最左侧 */
}

.nav-right {
  margin-left: auto; /* 把右导航推到最右侧 */
}

3. 为什么你之前的方法失效？ #

• float元素会脱离正常文档流，导致Logo容器和导航不在同一排版流里，垂直对齐需要额外做复杂的兼容处理（比如line-height、position），容易出问题。
• 单独给Logo容器加text-align:center会让它独占一行，自然会跑到导航上方。

兼容旧浏览器的备选方案（支持IE10及以下） #

如果必须兼容老旧浏览器，可以用inline-block替代float，手动分配宽度保证居中：

.header_main {
  text-align: center;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
}

.nav-left, .logo, .nav-right {
  display: inline-block;
  vertical-align: middle; /* 实现垂直居中 */
}

.nav-left {
  float: none;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 30%;
  text-align: left;
}

.nav-right {
  float: none;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 30%;
  text-align: right;
}

.logo {
  width: 40%;
  text-align: center;
}

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