即使在容器溢出时也要保持元素居中

Question

I recreated my problem in the snippet below: If you make it Full page and drag to decrease the horizontal size of the window the h1 element doesn't stay centered when it exceeds the bounds of it's container.

Here is a visual:

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?

 @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; } 

 <header class="v-cntr"> <!-- << v-cntr = vertically center --> <!-- ----------------------- HEADING WRAPPER ------------------------ --> <div class="hdg-wrap"> <h1>RIDE</h1> </div> <!-- ------------------------ IMAGE WRAPPER ------------------------- --> <div class="img-wrap"> <img src="http://svgshare.com/i/xL.svg" alt="Logo"> </div> </header> 

I'm trying not to change the structure of the HTML

---

EDIT: 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 keep the h1 ( 'ride' text ) element centered in the window as it shrinks.

Answer 1

You can reset the text-alignment for .img-wrap and center the image inside it using this CSS.

.img-wrap {
  text-align: initial;
  position: relative;
}
.img-wrap img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

ADDITION after comment: And you can apply the same priciple to the h1 . Since its parent is already absolutely positioned, I didn't change this and just added

h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Here's the complete snippet:

 @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; padding: 0; color: #eee; position: absolute; left: 50%; transform: translateX(-50%); } .v-cntr { position: relative; top: 50%; transform: translateY( -50%); } .hdg-wrap { color: #fff; opacity: 0.5; font-size: 5.5rem; position: absolute; top: 48%; right: 0; bottom: 0; left: 0; transform: translateY( -100%); z-index: -1; } .img-wrap { text-align: initial; position: relative; } .img-wrap img { position: absolute; left: 50%; transform: translateX(-50%); } 

 <header class="v-cntr"> <!-- << v-cntr = vertically center --> <!-- -- - - - - - - - - - - - - - HEADING - - - - - - - - - - - - - - --> <div class="hdg-wrap"> <!-- << hdg-wrap = heading wrapper --> <h1>RIDE</h1> </div> <!-- -- - - - - - - - - - - - IMAGE WRAPPER - - - - - - - - - - - - - --> <div class="img-wrap"> <img src="http://svgshare.com/i/xL.svg" alt="Logo"> </div> </header>