JSFiddle - React, Tailwind, and code Playground

by jestho

HTML

<div class="box">
    <img class="vcenter" src="http://rdjpg.com/200/200" alt=""/>
</div>

CSS

.box {
    background: #eee;
    border: 1px solid #ddd;
    text-align: center;
    width: 400px;
    height: 400px;
}

.vcenter {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}