头部导航菜单项未垂直居中，咨询问题原因及居中实现方案

问题产生原因 #

• vertical-align: middle 仅对行内元素、行内块元素、表格单元格元素生效。你当前的 .nav 设置了 float: right，浮动元素会被隐式转换为块级元素且脱离常规文档流，该属性对浮动元素完全不生效。
• 浮动的 .nav 默认顶部和父元素对齐，自身高度仅由内部文字内容撑开，没有和高度为40px的父容器 .header 做居中对齐，因此菜单项整体偏上。

解决方案 #

方案1：最小改动适配现有代码 #

仅需给 .nav 添加和父容器高度一致的行高即可，内部的行内块 li 元素会自动沿行高垂直居中，同时建议清除ul默认的外边距避免布局偏移，修改后的CSS片段如下：

.nav {
  list-style: none;
  float: right;
  line-height: 40px; /* 新增：行高等于父容器高度 */
  margin: 0; /* 新增：清除ul默认自带的上下外边距 */
}

方案2：Flex布局重构（更推荐） #

直接将父容器改为Flex布局，无需使用浮动和绝对定位，代码逻辑更清晰，后续适配调整也更便捷，完整修改后的CSS代码如下：

.header {
  margin-top: 70px;
  background: red;
  height: 40px;
  display: flex;
  align-items: center; /* 所有子元素自动垂直居中 */
  justify-content: space-between; /* logo和导航左右两端对齐 */
}

.logo {
  max-width: 150px;
}

.nav {
  list-style: none;
  display: flex;
  gap: 12px; /* 可自定义调整菜单项之间的间距 */
  margin: 0;
  padding: 0;
}

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