JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
    <div class="frame"> <span class="helper"></span>

        <img src="http://jsfiddle.net/img/logo.png" height=250 />
        <br /> <span>hi</span>
 <span><br />hi</span>
 <span>hi<br /><br /></span>

    </div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.frame {
    display:table-cell;
    vertical-align:middle;
    border: 1px solid red;
    text-align: center;
}
.helper {
    display: inline;
    height: 100%;
    vertical-align: middle;
    position: relative;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}