CodePen

HTML

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

CSS

            
              /* Discovered that this doesn't work if the natural image height extends the height of the container */
.page-wrapper {
  background: pink;
  width: 100%;
  height: 1000px;

}
.container {
  background: grey;
  width: 60%;
  height: 30%;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
}

/* 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;
  width: 40%;
  padding: 18px;    
  top: 0; left: 0; bottom: 0; right: 0;
}
.absolute-center.is-image {
  height: auto;
  display: block;
}
.absolute-center.is-image img {
  width: 100%;
  height: auto;  
}
.box-style {
  background: white;
  border: solid 3px #333; 
  box-shadow: 0 3px 8px #333;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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