CodeShare: A responsive vertically centered image

I've been revamping my portfolio site and wanted to have some images vertically centered alongside sections of text that would scale and maintain aspect ratio as the browser was resized.

I came across a tutorial for vertically centering them (see the 2nd example "CSS + Inline Image"). The idea is to display the image half way down the container and then bring it back up with a negative margin equal to half the height of the image.

So for a vertically centered non-responsive image you have:

img {
   position: absolute;
   top: 50%;
   width: 277px;
   height: 240px;
   margin-top: -120px; /* half the height */
}

However that deals with images where you know the height/width and I was setting my image at 30% of the width of the container with a height of auto. How do you know the height of an image with a % width?

My original image was 277px (width) by 240px (height). As it is displayed with a width of 30% then you can work out a % equivalent for the height by calculating it as a ratio of the width. In this case (277px/30%)*240px = 25.9927797833935%. So half the height would be 12.99638989169675%.

This gave me:

img {
  position: absolute;
  top: 50%;
  width: 30%;
  height: auto;
  margin-top: -12.99639%; /* half the height */
}

I'm sure this is a simple concept but it took a while to "click" in my head so I thought someone else may find it useful.

I've made a codepen demo if you want to see it or play around with the code. Try resizing the browser and see how the image maintains it's aspect ratio and vertical centering. Obviously isn't suited for tiny screens but you could solve that with a media query to put the image above/below the text.

Let me know if you have a better way of achieving this!