title: Use flexbox to centre text then centre the button with the remaining 50%
body: <p>Can't believe I'm only just starting to use flexbox, seems cool but I'm stuck. I could be just be over thinking things but I understand flexbox is supposed to make things easier.</p>
  
  <p>I want to display a full page hero image with a header, slogan and contact button, pretty simple right?</p>
  
  <p>I have attached an image of what I want:</p>
  
  <p><a href="https://i.stack.imgur.com/3jRnp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3jRnp.png" alt="enter image description here"></a></p>
  
  <p>Basically, I want to centre the heading and slogan text in the centre for this I use:</p>
  
  <pre><code>justify-content:center;
  </code></pre>
  
  <p>Then I want the button to be in the center of the remaining 50%. I have added the green image on the side to help show the positions I want.</p>
  
  <p>I tried using:</p>
  
  <pre><code>justify-space-around;
  </code></pre>
  
  <p>but that seems to push the heading text up.</p>
  
  <p>Here's my current code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
   margin:0;
   padding:0;
  }
  
  *, *:after, *:before {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
  }
  
  .website-container {
    display: grid;
    grid-gap: 0rem;
   grid-template-columns: repeat(1fr ) ;
  }
  .website-container &gt; * {
   display: flex;
   height: 100vh;
  }
  h1 {
   font-weight: 600;
   font-size: 4vw;
  }
  .header {
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    flex-direction: column;
  }
  button {
   --padding: 1.1em;
   color: black;
   font: inherit;
   background: none;
   padding: 1rem calc(1rem * 2);
   border: 2px solid black;
   border-radius: 2px;
  }
  button:hover {
   color: black;
   background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="website-container"&gt;
  &lt;header class="header"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="space"&gt;&lt;/div&gt;
      &lt;div class="title"&gt;
        &lt;h1&gt;Heading text here&lt;/h1&gt;
        &lt;h2&gt;Slogan text here&lt;/h2&gt;
      &lt;/div&gt;      
      &lt;div class="calltoaction"&gt;
        &lt;button type="submit" style="--primary-button"&gt;button&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I've missed anything, please let me know and I'll add more to the post.</p>