Responsive vertically centered images

image.html

<div class="responsive-container responsive-container--square">
	<img class="vertically-centered" src="path/to/image.jpg" />
</div>

rwd-vertically-centered-images.css

.responsive-container {
  position: relative;
  padding-top: 0px; /* change this to accommodate YouTube chrome, e.g. 35px */
  height: 0;
  overflow: hidden;
  background: white;
}

.responsive-container--square {
  padding-bottom: 100%;
}

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

.responsive-container--4x3 {
  padding-bottom: 75%;
}

.vertically-centered {
  position: absolute;
  top:50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}