Search code examples
htmlcssvertical-alignment

Vertically center content in a box with a fixed aspect ratio using pure CSS?

Using HTML/CSS, I'm trying to create the following:

  • a fluid-size box with a fixed aspect ratio (16:9)
  • a 50% black overlay inside the box
  • vertically centered arbitrary content on top of the overlay

I combined a couple of techniques that I found:

to arrive at something pretty close to the target:

http://codepen.io/troywarr/pen/zxNdKP?editors=110

That looks great in a 1280px wide viewport, but if you stretch the browser narrower or wider, you'll see that the .overlay maintains a fixed height while the .container resizes fluidly while still maintaining a 16:9 aspect ratio.

If I could set the value of line 20 to 100% and thus have .overlay expand to the visual height of .container, I'd be golden. It's understandable why that doesn't work (.container has an actual height of 0), but I'm stumped as to what to try next.

Please keep in mind that I may be going about this all wrong, and there may be a completely different approach that works better. Ultimately, all that's important to me is:

  • cross-browser support back to IE10
  • HTML/CSS only (as I could just add some JS to what I have now and get it to work well enough)

Thanks for any help!

Solution

  • Actually there are couple of ways to achieve vertical alignment, however I'm not going to change the whole thing.

    You just need to position the .overlay element absolutely and expand its dimensions by giving a width and height of 100% to it, so that it can fill the entire space of its parent, the .container:

    Example Here

    .container {
  /* other declarations... */
  padding-bottom: 56.25%;
  text-align: center;
  position: relative;
  overflow: hidden; /* arbitrary */
}

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

    Also using vw viewport percentage length could be useful in order for font-size property to change with the respect to the viewport size.

    body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  background-color: #59488b;
  -webkit-font-smoothing: antialiased;
  margin: 20px auto;
  width: 40%;
}

.container {
  background-image: url(http://lorempicsum.com/up/1080/1080/4);
  background-size: cover;
  background-position: 50%;
  margin: 0 auto;
  padding-bottom: 56.25%;
  text-align: center;
  position: relative;
  overflow: hidden; /* arbitrary */
}

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.content {
  color: #fff;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

h1 {
  margin: 0;
  font-size: 6vw;
}

p {
  margin: 0;
  font-size: 3vw;
}
    <div class="container">
  <div class="overlay">
    <div class="content">
      <h1>Title</h1>
      <p>This is some text!</p>
    </div>
  </div>
</div>