title: Keep element centered even when overflowing its container
body: <p>I recreated my problem in the snippet below: If you make it <strong>Full page</strong> and drag to decrease the horizontal size of the window the <code>h1</code> element doesn't stay centered when it exceeds the bounds of it's container. </p>
  
  <p>Here is a visual:</p>
  
  <p><a href="https://i.stack.imgur.com/87lDu.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/87lDu.gif" alt="enter image description here"></a></p>
  
  <p>Notice after it exceeds its containers bounds it just remains left aligned. 
  I would like it to stay centered. Is there a simple CSS fix?</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>@import url( 'https://necolas.github.io/normalize.css/latest/normalize.css' );
  * {
    outline: 1px solid red;
  }
  html, body {
    overflow: hidden;
    height: 100%;
    text-align: center;
  }
  h1 {
    margin: 0;
    color: #f3f3f3;
  }
  .v-cntr {
    position: relative;
    top: 50%;
    transform: translateY( -50% );
  }
  .hdg-wrap {
    font-size: 5.5rem;
    position: absolute;
    top: 48%;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateY( -100% );
    z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="v-cntr"&gt;              &lt;!-- &lt;&lt; v-cntr = vertically center --&gt;
  
    &lt;!-- ----------------------- HEADING WRAPPER ------------------------ --&gt;
    &lt;div class="hdg-wrap"&gt;
      &lt;h1&gt;RIDE&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;!-- ------------------------ IMAGE WRAPPER ------------------------- --&gt;
    &lt;div class="img-wrap"&gt;
      &lt;img src="http://svgshare.com/i/xL.svg" alt="Logo"&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>I'm trying not to change the structure of the HTML</em></p>
  
  <hr>
  
  <p><strong>EDIT:</strong> I'm getting answers attempting to center the image instead of the text behind it. I can see the confusion as both get off center. I will reiterate: My main concern is to <strong>keep the <code>h1</code> ( 'ride' text ) element centered in the window as it shrinks.</strong></p>