如何让导航栏(navbar)内的文本实现垂直居中，上下间距相等？

你现有代码无法实现垂直居中的核心原因有两个：

• 导航栏flex容器未配置交叉轴垂直对齐规则
• 导航链接仅设置了顶部外边距，底部没有对应等距的留白

推荐实现方案（灵活性最高） #

给导航栏容器添加垂直方向等距内边距，同时配置flex交叉轴居中属性，删除链接的顶部margin即可，修改后代码如下：

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* 新增：控制flex子元素垂直方向居中 */
  padding: 3rem 0; /* 新增：上下预留相等的3rem间距，可自行调整数值修改导航栏高度 */
  font-size: 20px;
  background-color: grey;
  box-shadow: 0 2px 0 black;
}

#navbar a {
  color: white;
  margin-right: 3rem;
  /* 移除了原有的margin-top: 3rem规则 */
  text-decoration: none;
}

该方案的优势是导航栏高度由上下padding自动撑开，子元素始终保持垂直居中，后续调整导航栏高度只需要修改padding数值即可，不需要改动子元素样式。

备选方案（仅修改链接样式） #

如果你不想改动导航栏容器的原有样式，也可以给a标签设置相等的上下外边距实现效果，修改后代码如下：

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 20px;
  background-color: grey;
  box-shadow: 0 2px 0 black;
}

#navbar a {
  color: white;
  margin: 3rem 3rem 3rem 0; /* 修改：上下都设置3rem外边距，同时保留原有的右侧间距 */
  text-decoration: none;
}

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