如何在全高子div中垂直居中文字并消除底部多余间距

架构老林

2026-10-6

问题原因

你的父容器.app总高度仅为100vh，内部先放置了占一定高度的logo导航栏，下方的.landing又单独设置了100vh高度，两者高度总和超出了父容器的总高度，就会导致底部出现溢出的多余间距，同时居中效果也会错位。

解决方案

按如下修改你的CSS代码即可：

给父容器.app添加纵向弹性布局属性，方便自动分配内部高度：

.app {
  background-color: black;
  height: 100vh;
  color: white;
  /* 新增以下两行 */
  display: flex;
  flex-direction: column;
}

修改.landing和.landing-content的高度配置，让.landing自动占满logo之外的剩余高度：

.landing {
  background: url(bg.svg);
  /* 删掉原有的height: 100vh，新增以下行 */
  flex-grow: 1;
}

.landing-content {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 将原有的height: 100vh改为100% */
  height: 100%;
}