JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child">
    <img src='http://placekitten.com/200/200' />
  </div>
</div>

CSS

body, html{height: 100%;}  
.parent {
    width: 100%;
    height: 100%;
    text-align: center;
    display: table;
    
  }
  .child {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    background: red;
  }