CSS中align-items:center不生效，头部导航链接无法居中是什么原因

问题根因 #

• 你为.nav-links设置的align-items: center仅在flex容器自身的高度范围内生效，当前你没有给.nav-links设置和头部等高的高度，它的高度默认仅由内部导航文字的内容高度撑开，自然无法在5rem高的头部区域实现垂直居中。
• 浏览器默认给<ul>元素自带上下margin、左侧padding的默认样式，这部分额外间距也会导致导航位置偏移。

修复方案 #

调整CSS代码如下即可解决问题：

.nav-links {
  display: flex;
  list-style: none;
  /* 清除ul默认自带的边距 */
  margin: 0;
  padding: 0;
  /* 让导航容器撑满头部高度 */
  height: 100%;
  text-decoration: none;
  justify-content: space-evenly;
  align-items: center;
}

如果设置height: 100%后未生效，是因为.nav-links的直接父级<header id="header">没有明确高度，给#header也添加height: 100%属性即可。

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