JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="block v_align">
    <div class=frame>
      <img src="http://jsfiddle.net/img/logo.png" height=25 class="v_align" />
     </div>
    <div class=frame>
      <img src="http://jsfiddle.net/img/logo.png" height=23 class="v_align" />
     </div>
  </div>
</div>

CSS

.container, body, html{
  height: 100%;
  width: 100%;
  text-align: center
}
.block{
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
.frame {
  width: 160px;
  height: 50px;
  border: 1px solid red;
  text-align: center;
  margin: 1em 0;
}

img {
  background: #3A6F9A;
  display: inline-block;
}

JavaScript

$(document).ready(function() {
  // define the class that vertial aligns stuff
  var objects = '.v_align';
  // initial setup
  verticalAlign(objects);

  // register resize event listener
  $(window).resize(function() {
    verticalAlign(objects);
  });
});

function verticalAlign(selector) {
  $(selector).each(function(val) {
    var parent_height = $(this).parent().height();
    var dif = parent_height - $(this).height()
    // should only work if the parent is larger than the element
    var margin_top = dif > 0 ? dif/2 : 0;
    $(this).css("margin-top", margin_top + "px");
  });
}