How to center images of any size vertically and horizontally in a row?

Question

css

There is a grid with pictures in 4 columns. I'm struggling with how to center images on the vertical and horizontal center at any resolution, regardless of the size of the image (height). How to do this using only styles, not scripts and without using flex , because. Do you need ie9+ crossbrowser support ? Fiddle

<div class="row">
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/70x81">
  </div>
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/100x33">
  </div>
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/100x19">
  </div>
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/80x72">
  </div>
</div>

Answer 1

https://jsfiddle.net/iBird/mt6tv6xu/2/

Answer 2

Well , you can try using vertical-align and a helper element. Here it is written how it works and how you can additionally finish it so that it reaches IE.