如何在nav元素内垂直对齐div？实现菜单项垂直居中

我明白你纠结的点——看了一堆教程但大多依赖框架的现成类，自己手动写纯CSS就是搞不定垂直居中，尤其是还混了浮动的情况。其实用纯CSS Flexbox就能轻松解决，完全不需要jQuery或Bootstrap，下面一步步来：

核心问题分析 #

你原来的布局里给h1加了float:left，这会让元素脱离文档流，导致nav的高度无法被正确计算，自然很难实现内部元素的垂直居中。Flexbox是现代布局的首选方案，能完美解决这类问题。

步骤1：重构nav的布局方式 #

把nav设置为flex容器，同时开启垂直居中对齐，让内部元素左右分布：

nav {
  background-color: #13293d;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
  width: 100%;
  z-index: 100;
  /* 新增Flex核心属性 */
  display: flex;
  align-items: center; /* 垂直方向居中对齐所有子元素 */
  justify-content: space-between; /* 让logo左、菜单右分布 */
}

步骤2：移除h1的浮动 #

Flexbox已经能帮我们实现左右布局，所以去掉h1的float:left：

nav h1 {
  height: 75px;
  width: 200px;
  background: #f00;
  /* 删掉float:left */
}

完整代码示例 #

HTML（无需修改） #

<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
</head> 
<body> 
<nav> 
<h1> 
<a href="/"> LOGO </a> 
</h1> 
<div id="navelements"> 
<ul> 
<li><a href="#">Home</a> 
<li><a href="#">About Us</a> 
<li><a href="#">Contact</a> 
</ul> 
</div> 
</nav> 
</body> 
</html>

修改后的CSS #

nav {
  background-color: #13293d;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav h1 {
  height: 75px;
  width: 200px;
  background: #f00;
}

#navelements ul {
  list-style: none;
  margin: 0; /* 移除浏览器默认margin，消除多余间距 */
  padding: 0; /* 移除浏览器默认padding */
}

#navelements ul li {
  display: inline-block;
}

#navelements ul li a {
  color: #fff;
  font-size: 1em;
  font-weight: 800;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

为什么这个方法有效？ #

Flexbox是专门为解决复杂布局问题设计的：

• display:flex让nav变成flex容器，内部的h1和#navelements自动成为flex项目
• align-items:center强制所有flex项目在容器的垂直方向上居中
• justify-content:space-between把两个子元素分别推到容器的左右两端，完美替代了原来的浮动布局

这样修改后，不管nav或h1的高度怎么调整，菜单项都会自动保持垂直居中，完全不需要依赖任何外部框架~

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