A Pen by Mike Stezycki.

Centred-ratio-block.markdown

Centred ratio block

Vertically centred, intrinsic ratio block that's totally flexible.

A Pen by Mike Stezycki on CodePen.

License.

index.html

<section class="center-container">
  <div class="center-object">
    <div class="container">
      <div class="ratio  ratio--16x9">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" class="img">
      </div>
    </div>
  </div>
</section>

style.scss

@import "compass";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body { height: 100%; }

html {
  font: normal 100%/1.5 sans-serif;
}

.center-container {
  display: table;
  width: 100%;
  height: 100%;
}
.center-object {
  display: table-cell;
  vertical-align: middle;
}

.container {
  max-width: (564px + 48px);
  margin-right: auto;
  margin-left:  auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.ratio {
  height: 0;
  position: relative;
  
  > img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #ddd;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    user-select: none;
    pointer-events: none;
  }
}

.ratio--16x9 {
  padding-bottom: 56.25%;
}