垂直方向と水平方向Iは水平方向および垂直方向にそうように私のバナーテキストを揃えるにしようとしているH1タグとpタグ

Question

を含むDIVを揃える：私は可能な最良の方法のために周りに検索されている

と非常に難しいと感じました。それは私が逃して数時間を無駄にしたことは本当に簡単かもしれませんが、それは学習していると思います！

これここに私のhtml

<header class="fullscreen" style="background-image: url('images/bg.png');"> 
     <div class="logo-wrapper text-center"> 
      <img id="logo" src="" alt="The South-West Skateboarding (SWSB) logo." /> 
     </div> 
     <nav id="primary" class="text-center"> 
      <a href="/">HOME</a> | 
      <a href="/about">ABOUT</a> | 
      <a href="/team">TEAM</a> | 
      <a href="/gallery">GALLERY</a> | 
      <a href="/forum">FORUM</a> | 
      <a href="/login">LOGIN</a> 
     </nav> 
     <div id="banner" > 
      <h1>SOUTH-WEST SKATEBOARDING</h1> 
      <p>EST. 2016</p> 
     </div> 
    </header> 

とCSS（それはSASSにあります申し訳ありませんが、違いの多くを作るはずの）

header { 

    padding: 50px 0 50px 0; 
    height: 100%; 

    .logo-wrapper { 
     margin: 0 auto; 
     width: 100%; 

     img#logo { 
       width: 140px; 
       height: 85px; 
     } 
    } 


    nav#primary { 
     margin-top: 25px; 

     a { 
      color: $nav-link-color; 
      font-weight: 100; 
      letter-spacing: 2.15px; 
      text-decoration: none; 
      text-transform: uppercase; 
     } 
    } 

    #banner { 
     h1 { 
      margin-bottom: 0; 
     } 

     p { 
      margin: 0; 
     } 
    } 

Answer 1

がdemo

#banner { 
    width: 100%; 
    height: 400px; 
    background-color: yellow; 
    display: flex; 
    align-items: center; 
    justify-content: center 
}