html - 在全高子 div 中垂直居中文本

Question

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

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;
}

<div class="app">
  
  <div class="logo">
     <h1>logo</h1>
  </div>
      
  <div class="landing">
    <div class="landing-content">
      <h1>hi, i'm jordan</h1>
    </div>
  </div>
  
</div>

标签： htmlcssflexbox

Answer 1

更改 .app 类如下。

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