html - Flexbox Hero 不会居中

Question

我不知道为什么 justify-self 对我的 .hero-content 不起作用。

我试图让我的 .hero-content 水平和垂直居中，它水平居中但垂直它仍然位于顶部。不确定该怎么做。

.hero {
 height: 100vh;
 width: 100vw;
 background-image: url("../img/main.jpg");
 background-size: cover;
 color: #ffffff;
 display: flex;
 flex-direction: column;
}

header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 25px 50px;
 opacity: 0;
 animation: fadeIn 1s .5s forwards;
}

.hero-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

<section class="hero">
 <header>
   <a href="#" class="logotype">Mountain Travel</a>
   <nav>
     <ul class="top-nav__menu">
      <li class="top-nav__menu-item"><a href="#">Tours</a></li>
      <li class="top-nav__menu-item"><a href="#">About</a></li>
      <li class="top-nav__menu-item"><a href="#">Contact Us</a></li>
    </ul>
   </nav>
 </header>
 <div class="hero-content">
  <h2>Mountain Travel</h2>
  <h3 class="small-margin-top">Unmissable Adventure Tours Around the World</h3>
  <button class="cta">Contact Us Now</button>
 </div>
</section>

Answer 1

你需要在你的.hero-content中设置flex-grow: 1。

演示(查看完整页面)

.hero {
 height: 100vh;
 width: 100vw;
 background-image: url("../img/main.jpg");
 background-size: cover;
 color: #ffffff;
 display: flex;
 flex-direction: column;
}

header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 25px 50px;
 opacity: 1;
 animation: fadeIn 1s .5s forwards;
}

.hero-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 flex-grow: 1;
}

/************** 
** DEMO ONLY **
**************/

.hero-content h2 {
  margin-top: 0;
}

.hero-content {
  background-color: #eee;
}

.hero-content * {
  color: #333;
}

<section class="hero">
 <header>
   <a href="#" class="logotype">Mountain Travel</a>
   <nav>
     <ul class="top-nav__menu">
      <li class="top-nav__menu-item"><a href="#">Tours</a></li>
      <li class="top-nav__menu-item"><a href="#">About</a></li>
      <li class="top-nav__menu-item"><a href="#">Contact Us</a></li>
    </ul>
   </nav>
 </header>
 <div class="hero-content">
  <h2>Mountain Travel</h2>
  <h3 class="small-margin-top">Unmissable Adventure Tours Around the World</h3>
  <button class="cta">Contact Us Now</button>
 </div>
</section>