title: Maintain vertically centered alignment of overlay text
body: <p>I am using a large hero image that is absolutely positioned in order to place a text overlay on top of it.  I have also ensured that the hero image is responsive no matter the dimensions of the screen.  THe issue I am running into, is ensuring the overlay text is vertically centered within the background image no matter what the screen size.</p>
  <p>The following link shows the effect I am trying to achieve with the overlay text: <a href="https://www.youtube.com/watch?v=gfzWLbAbcCw" rel="nofollow noreferrer">https://www.youtube.com/watch?v=gfzWLbAbcCw</a></p>
  <p>My jsx code is as follows:</p>
  <pre><code>   &lt;&gt;
        &lt;div className=&quot;container&quot;&gt;
          &lt;div className=&quot;container-background&quot;&gt;
            &lt;img
              src=&quot;https://i.imgur.com/iyFtMNA.jpg&quot;
              alt=&quot;bg&quot;
              className=&quot;container-background-img&quot;
            /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;content&quot;&gt;
            &lt;Navbar /&gt;
            &lt;div className=&quot;page-outer&quot;&gt;
              &lt;div className=&quot;page-inner&quot;&gt;
                &lt;div className=&quot;wel-top-header&quot;&gt;text&lt;/div&gt;
                &lt;div className=&quot;wel-top-middle&quot;&gt;
                  &lt;div style={{ marginTop: -30 }}&gt;text&lt;/div&gt;
                  &lt;div style={{ marginTop: -48 }}&gt;text&lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;wel-tagline&quot;&gt;
                  Pagerland offers a great, smooth looking and ultra-fast landing
                  page templates build on Gatsby and React.
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
  </code></pre>
  <p>my css code is as follows:</p>
  <pre><code>* {
    margin: 0;
    padding: 0;
  }
  
  .navbar {
    height: 80px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid black 1px;
  }
  
  
  
  .container {
    position: relative;
  }
  .container .container-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.25;
  }
  
  
  </code></pre>
  <p>the following link contains a code sandbox for debugging! <a href="https://codesandbox.io/s/charming-dijkstra-im7nb?file=/src/styles.scss:0-1101" rel="nofollow noreferrer">https://codesandbox.io/s/charming-dijkstra-im7nb?file=/src/styles.scss:0-1101</a></p>
  <p>any and all suggestions would be greatly appreciated</p>