title: vertical centering with flexbox does not deliver the texts under each other
body: <p>I would like to center the text vertically. The problem is the text is side by side and not one below the other. And the text should still be below each other like normal HTML and not next to each other</p>
  <p>html</p>
  <pre><code>&lt;div&gt;
    &lt;div class=&quot;hero-section&quot;&gt;
      &lt;div class=&quot;hero-text&quot;&gt;Some text&lt;/div&gt;
     
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>scss</p>
  <pre><code>.hero-section {
      background-image: url(&quot;https://images.unsplash.com/photo-1622495546323-5dac33dedb01?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80&quot;);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 100vh;
      width: 100%;
      margin: auto;
      align-items: center;
      justify-content: left;
  
      .hero-text {
          color: #fff;
          vertical-align: middle;
          display : flex;
          justify-content: center;
      }
  }
  </code></pre>
  <p>So I looked at <a href="https://stackoverflow.com/questions/38394818/central-align-of-elements-css-without-flexbox">Central align of elements CSS without flexbox</a></p>
  <p>in my html</p>
  <pre><code>  &lt;div class=&quot;hero-section&quot;&gt;
      &lt;div class=&quot;hero-row&quot;&gt;
      &lt;div class=&quot;hero-text&quot;&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;h5&gt;Title&lt;/h5&gt;
        &lt;h6&gt;Title&lt;/h6&gt;
       &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>in my scss</p>
  <pre><code>.hero-section {
      background-image: url(&quot;https://images.unsplash.com/photo-1622495546323-5dac33dedb01?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80&quot;);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 100vh;
      width: 100%;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: left;
  
      .hero-row {
          display:table-cell
      }
  
      .hero-text {
          display: table;
          color: #fff;
          vertical-align: middle;
          display : flex;
      }
  }
  </code></pre>
  <p>But it still don't work</p>