Navbar中nav-left与nav-right元素垂直居中问题（含sticky定位）

我有一个包含nav-left和nav-right两个div的导航栏，希望将它们分别向左、向右浮动，同时设置sticky定位。但当前navbar内的元素高度不一致，左侧元素偏上、右侧元素偏下，需要实现二者垂直居中。现有代码如下：

nav {
  position: sticky;
  width: 100%;
  background: green;
  margin: 0;
  padding: 0;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

nav a {
  display: inline-block;
  width: 60px;
  text-decoration: none;
}

.nav-left li {
  float: left;
}

.nav-right li {
  float: right;
}

<header class="header">
<nav class="nav">
  <div class="nav-left">
    <ul>
      <li><a href="#">Blah</a></li>
      <li><a href="#">Blah</a></li>
      <li><a href="#">Blah</a></li>
    </ul>
  </div>
  <div class="nav-right">
    <ul>
      <li><a href="#">Bloh</a></li>
      <li><a href="#">Bloh</a></li>
    </ul>
  </div>
</nav>
</header>

解决方案1：使用Flexbox（推荐） #

Flexbox是现代布局中实现垂直居中最简洁高效的方式，同时能完美满足sticky定位和左右分布的需求。修改导航栏的CSS如下：

.nav {
  position: sticky;
  top: 0; /* 必须设置top值，sticky定位才会生效 */
  width: 100%;
  background: green;
  margin: 0;
  padding: 0 10px; /* 可选：给左右加内边距避免内容贴边 */
  display: flex;
  justify-content: space-between; /* 将左右容器分别推到两端 */
  align-items: center; /* 强制所有子元素垂直居中 */
}

.nav-left ul, .nav-right ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex; /* 让列表项横向排列，替代float */
  gap: 10px; /* 可选：给列表项之间加间距 */
}

nav a {
  display: inline-block;
  width: 60px;
  text-decoration: none;
  padding: 12px 0; /* 给链接加上下内边距，让导航栏有合适高度 */
  color: #fff; /* 可选：设置文字颜色增强可读性 */
}

修改后效果：

• 导航栏会固定在页面顶部（sticky生效）
• nav-left和nav-right自动分布在左右两侧
• 不管两侧元素高度是否一致，都会保持垂直居中
• 用flex替代float，避免浮动带来的布局问题

解决方案2：兼容旧浏览器的垂直对齐方案 #

如果需要兼容不支持Flexbox的旧浏览器，可以通过vertical-align: middle结合行内块元素实现：

.nav {
  position: sticky;
  top: 0;
  width: 100%;
  background: green;
  margin: 0;
  padding: 0;
  height: 44px; /* 明确设置导航栏高度 */
  line-height: 44px; /* 行高等于高度，辅助文字垂直居中 */
}

.nav-left, .nav-right {
  display: inline-block;
  vertical-align: middle; /* 关键：让两个容器垂直居中对齐 */
  height: 100%; /* 让容器占满导航栏高度 */
}

.nav-left {
  float: left;
}

.nav-right {
  float: right;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.nav-left li {
  float: left;
  height: 100%;
}

.nav-right li {
  float: right;
  height: 100%;
}

nav a {
  display: inline-block;
  width: 60px;
  text-decoration: none;
  height: 100%;
  line-height: 44px; /* 让链接文字垂直居中 */
  color: #fff;
}

这种方法通过固定导航栏高度，配合vertical-align: middle和行高，确保两侧元素垂直对齐，适合需要兼容IE等旧浏览器的场景。

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