Center absolutely positioned element depending on image ratio

Question

The problem example can be seen here http://codepen.io/anon/pen/EDgiz.

As you can see, a square(1:1) proportion element is positioned perfectly fine. But two others - not.

Is there a pure CSS solution for such cases?

If not, what can you propose as gentle solution? Because I actually can position those with javascript manually, but i think that's more or less - dirty solution.

Answer 1

Just found a very delicate solution here: http://www.paulund.co.uk/absolute-center-images-with-css, using transform: translate() function

So my final example looks like this - http://codepen.io/anon/pen/EDgiz:

img{
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

Works Awesome for me