元素对齐问题：为何align-items:center无法生效？

你的align-items: center没生效，核心原因是flex容器.center-align没有足够的高度空间。虽然.header设置了height:72px，但它的子元素.container和.center-align都没有继承/占满这个高度，flex的垂直居中是基于容器本身的高度来生效的，容器高度和内容高度一致的话，自然看不出居中效果。

解决步骤 #

只需要给.container和.center-align加上高度，让flex容器能撑满.header的高度：

.header { 
  width: 100%;
  height: 72px;
  position: sticky;
  z-index: 100;
  top: 0;
  background-color: black;
}
.container {
 max-width: 1280px;
 margin: 0 auto;
 height: 100%; /* 新增：让container占满header的高度 */
}
.center-align {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%; /* 新增：让flex容器占满container的高度 */
}

a, span {
color: white;
}

效果说明 #

修改后，.center-align作为flex容器，高度和.header一致（72px），此时align-items: center会把容器内的子元素在这个高度范围内垂直居中，完美实现你要的效果。

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