title: Responsive text overlay on top of a responsive image
body: <p>Utilizing bootstrap, I have a responsive image and some overlay text/button that I would like placed in the center of the image. However, despite the text being w/in the div of the img tag, the text doesn't stay in the center when the screen size is shrunk.
  What it's supposed to look like:
  <a href="https://i.stack.imgur.com/S8k8p.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S8k8p.jpg" alt="fullscreen mode" /></a></p>
  <p>What it looks like in responsive:
  <a href="https://i.stack.imgur.com/gZTJN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gZTJN.jpg" alt="responsive mode" /></a></p>
  <p>HTML code:</p>
  <pre><code> &lt;div id=&quot;container-a&quot; class=&quot;img-content&quot;&gt;
          &lt;img src=&quot;../img/file.large.jpg&quot; class=&quot;img-fluid&quot; alt=&quot;workout world img&quot; width=&quot;1440&quot; height=&quot;600&quot;&gt;
              &lt;span class=&quot;text-box-a container px-4 text-center z-2 align-items-center&quot;&gt;
              &lt;div class=&quot;text-box-b&quot;&gt;
                  &lt;h1 class=&quot;main-text f-30 f-sm-50 f-md-75 f-xl-75 text-center font-weight-bold animated fadeInUpSmooth&quot; style=&quot;font-size:6vw;&quot;&gt;Gains are simply one click away!&lt;/h1&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; style=&quot;font-size:3vw;&quot;&gt;Ready?&lt;/button&gt;
              &lt;/div&gt;
              &lt;/span&gt;
   &lt;/div&gt;
  </code></pre>
  <p>CSS code:</p>
  <pre><code>#container-a img {
    position: relative;
    display: block;
    z-index: 1;
    top: 0px;
    left: 0px; 
    padding-bottom: 20px;
  }
  .img-content {
    display: inline;
  }
  
  @media screen and (min-width: 601px) {
   .text-box-a {
     font-size: 80px;
   }
  }
    @media screen and (max-width: 600px) {
  .text-box-a {
    font-size: 30px;
   }
  }
  
  .text-box-a {
    z-index: 20; 
    top: 50%; 
    left: 50%;
    overflow: hidden;
    position: absolute;
    align-items: center !important;
    text-align: center !important;
    transform: translate(-50%, -50%); 
    text-shadow: 2px 2px #585858;
  }
  .text-box-b {
    background: rgb(204, 204, 204);
    background: rgba(204, 204,204, .1);  
  }
  
  .img-content .main-text {
     z-index: 2;
  }
  </code></pre>