CodePen

HTML

            
              <div class="container absolute-center">   
  <div class="absolute-center is-image">
    <img src="http://natalieolivo.github.io/imgs/girl.jpg"  />
  </div>
</div>
            
          
!

CSS

            
              html, body { height: 100%; margin: 0; }
/* Discovered that this doesn't work if the natural image height extends the height of the container */
body {
  background: pink;
}

.container {
  background: grey;
  width: 60%;
  height: 40%;
  box-sizing: border-box;
}

/* this works charmingly for vertical centering
if a variable height is not necessary, since height
needs to be specified */
.absolute-center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.absolute-center.is-image {
  max-height: 90%;
  background-image: url("http://natalieolivo.github.io/imgs/girl.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.absolute-center.is-image img { 
  visibility: hidden;
  display: block;
  width: 100%;
  height: auto;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................