Герой Flexbox не будет центром

Question

Я в недоумении, почему justify-self не будет работать для моего .hero-контента.

Я пытаюсь, чтобы мой .hero-контент был центрирован по горизонтали и вертикали, и он был центрирован по горизонтали, но по вертикали он все еще выталкивается наверх. Не уверен, что делать.

.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

Вам необходимо установить flex-grow: 1 в вашем .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: 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>