JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="img"></div>
</div>

CSS

.outer{
    width: 300px;
    height: 300px;
    border: 1px solid #ddd;
    
    text-align: center;
}

.outer:after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.img{
    width: 100px;
    height: 120px;
    background: #ddd;
    
    display: inline-block;
    vertical-align: middle;
}