JSFiddle - React, Tailwind, and code Playground

HTML

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.wraptocenter img { max-width: 190px; max-height: 190px; }
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->    

<div class="wraptocenter"><span></span><img src="http://lorempixel.com/100/100" alt="..."></div>
<div class="wraptocenter"><span></span><img src="http://lorempixel.com/170/170" alt="..."></div>
<div class="wraptocenter"><span></span><img src="http://lorempixel.com/220/220" alt="..."></div>