JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="image">
        <img src="http://placekitten.com/200/200" />
    </div>
</div>

CSS

body,html {
    width: 100%;
    height: 100%;
    margin: 0;
}
.container {
  text-align: center;
  background: #ccc;
  width: 100%;
  height: 100%;
   
}
 
.container:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
 }
 
.image {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
 }