我试图在全高的子div中垂直居中文本，但当我这样做时，它的底部有额外的间距。如果没有额外的间距，我怎么做呢？我希望有一个导航和一些垂直居中的文本，但没有额外的间距。

---

顺晟科技：

按以下方式更改。app类。

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

h1 {
  margin: 0;
  padding: 0;
}

.landing {
  background: url(bg.svg);
  height: 100vh;
}

.landing-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.landing-content h1 {
  color: white;
  margin: 0;
}

.app {
  background-color: black;
  height: 100vh;
  color: white;
}

删除着陆类高度，并将着陆内容类高度添加到100%。当你将着陆级高度添加到100VH时，它涵盖了100VH高度。但是logo类已经覆盖了一些高度。因此它溢出。

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

h1 {
  margin: 0;
  padding: 0;
}

.landing {
  background: url(bg.svg);
  height: 100vh;
}

.landing-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.landing-content h1 {
  color: white;
  margin: 0;
}

.app {
  background-color: black;
  height: 100vh;
  color: white;
}

工作小提琴-https://jsfiddle.net/alimurrazi/36SVHO08/1/

的使用是不合适的，它所做的是识别视图宽度作为它的高度，这个限制限制了高度，并在底部重新创建一个小裂缝。您可以尝试使用

因为有默认值，所以它需要占用多大的空间，然后进入下面，占用额外的100VH，因此您需要滚动以查看其全部内容。

这里的解决方案要么是简单地添加到，但这仍然会使文本偏离中心一点。另一个解决方案是给出，并使用flexbox根据需要分配空间。