title: Horizontally and vertically center bootstrap 4 columns in consecutive rows
body: <p>I'm trying to simply center justify and align two bootstrap columns inside a container. The columns are in different rows.</p>
  
  <p>The grid layout is </p>
  
  <pre><code>&lt;body style="height: 100vh;"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-6"&gt;
                  &lt;div class="card"&gt;
                      hello
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-4"&gt;
                  &lt;div class="card"&gt;
                      world
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>the cards are just to outline the containers.</p>
  
  <p>I'm aware there are MANY questions on vertical alignment, and I may have missed the one that contains the answer I need. But my take away from most of them is that the parent needs to have some height.<br>
  The following works just fine if you have only one row, because you can center the column in the 100% height row. But if you have two rows, it doesn't so well, since each column is centered in its own row, and the rows are each the height of the window.</p>
  
  <pre><code>&lt;body style="height: 100vh;"&gt;
      &lt;div class="container h-100"&gt;
          &lt;div class="row h-100 justify-content-center align-items-center"&gt;
              &lt;div class="col-6"&gt;
                  &lt;div class="card"&gt;
                      hello
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row h-100 justify-content-center"&gt;
              &lt;div class="col-4"&gt;
                  &lt;div class="card"&gt;
                      world
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I wish I could just move the <code>justify-content-center align-items-center</code> up to the container, but alas that doesn't seem to do anything.</p>
  
  <p>So, please help me, how can I place these flush, one on top of the other, smack in the middle of the screen?</p>