JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-wrapper"><img src="http://placehold.it/100x50/"></div>
<div class="image-wrapper"><img src="http://placehold.it/50x100/"></div>
<div class="image-wrapper"><img src="http://placehold.it/100x100/"></div>

CSS

.image-wrapper {
    position:relative;
    width:200px;
    height:200px;
    outline:1px solid orange;
}
.image-wrapper img {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}