如何在全屏背景落地页居中Logo？导航栏挤压问题求解

嘿，我明白你遇到的困扰了——这种布局问题在前端新手阶段确实很常见，咱们一步步来把它搞定。

问题根源分析 #

你当前的代码里，.hero-container 设置了 height:100vh，但里面的 nav 是正常文档流元素，会占据一部分垂直空间；同时 .hero-content 又设置了 height:100vh，这就导致整个容器的总高度变成了「导航栏高度 + 100vh」，超过了视口高度。所以虽然 .hero-content 里的Logo是垂直居中的，但整个内容块被导航栏挤得往下移，视觉上就不在页面中心了。

方案一：使用Flex布局让容器内部合理分配空间 #

这是最推荐的现代布局方式，不需要复杂的定位，就能让导航和内容区完美适配视口：

修改后的CSS代码：

* { margin: 0; padding: 0; }
.icon { width: 50px; }
.logo { width: 250px; }
.hero-container {
  background-image: url(https://images.wallpaperscraft.com/image/road_highway_asphalt_146464_1920x1080.jpg);
  background-position: center center;
  background-size: cover;
  min-height: 100vh; /* 用min-height替代height，避免内容溢出时被截断 */
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
}
nav {
  padding: 30px;
  display: flex;
  justify-content: space-between;
}
.hero-content {
  flex-grow: 1; /* 让内容区占据容器剩余的所有垂直空间 */
  display: flex;
  justify-content: center;
  align-items: center;
}

说明：

• 把 .hero-container 改成垂直方向的Flex容器后，nav 会保持在顶部，.hero-content 通过 flex-grow:1 自动填充剩下的视口高度，这样Logo就能完美居中在剩余空间里，同时不会破坏导航的Flex布局。
• 用 min-height:100vh 替代 height:100vh，如果后续页面内容增多，容器会自动扩展，不会出现内容被截断的问题。

方案二：给导航栏设置绝对定位（适合固定导航场景） #

如果你希望导航栏固定在页面顶部，不随内容滚动，可以用绝对定位让它脱离文档流，这样就不会占用内容区的空间：

修改后的CSS代码：

* { margin: 0; padding: 0; }
.icon { width: 50px; }
.logo { width: 250px; }
.hero-container {
  background-image: url(https://images.wallpaperscraft.com/image/road_highway_asphalt_146464_1920x1080.jpg);
  background-position: center center;
  background-size: cover;
  height: 100vh;
  position: relative; /* 为绝对定位的导航提供参考父容器 */
}
nav {
  padding: 30px;
  display: flex;
  justify-content: space-between;
  position: absolute; /* 脱离文档流，不再占据空间 */
  top: 0;
  left: 0;
  right: 0; /* 让导航栏宽度填满容器 */
}
.hero-content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

说明：

• 给 .hero-container 添加 position:relative，确保导航栏的绝对定位是相对于容器而不是整个页面。
• 导航栏脱离文档流后，.hero-content 的 100vh 就能完全填满视口，Logo自然就居中在页面视觉中心了，同时导航的Flex布局也不受影响。

你可以根据自己的需求选择其中一种方案，两种都能解决你当前的问题～

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