如何实现导航栏居中位于logo图片下方 替代设置.logo高度的方案

问题根源 #

你当前的布局中，header是默认普通流布局，.logo设置了height: 100%直接占满了header的100vh高度，导致导航栏被挤出视口外；且logo和导航是同级兄弟元素，单独给两个元素设置弹性布局没法控制二者的相对位置，所以align-items不生效。

调整方案 #

仅需要修改两处CSS即可实现需求，无需硬设logo高度：

1. 给header容器添加弹性盒垂直布局属性，让内部元素自动垂直居中排布：

.header{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px; /* 可自行调整数值控制logo和导航的上下间距 */
}

2. 删除.logo类中的height: 100%属性即可。

调整后logo和导航会自动居中排列在header垂直居中位置，导航始终在logo正下方，适配不同页面高度也不会出现错位问题。

修改后完整CSS参考 #

*{
 margin:0;
 padding: 0;
 box-sizing: border-box;
 font-family: sans-serif;      
}
.header, .gallery__section{
  height: 100vh;
}
/* 新增的header弹性布局样式 */
.header{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.gallery__section{
  background-image: url(https://picsum.photos/1920/1080);
}
header{
  background-image: url(https://picsum.photos/1920/1080);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.logo{
  display: flex;
  justify-content: center;
  align-items: center;
  /* 删掉了原来的height: 100% */
}
.logo img{
  max-width: 200px;
  width: 100%;
  height: auto;
}
.nav__menu{
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav__menu ul li {
  display: inline-block;
  /* 可自行添加导航项的左右间距，比如padding: 0 12px; */
}

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