JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">

    <div id="container">
        <img src="http://placekitten.com/g/400/600" alt=""></img>
    </div>
    
</div>

CSS

body, html {margin:0; padding:0; width:100%; height:100%;}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  outline: 0;
}

#wrap {
    display: table; width:100%; height:100%; border:1px solid red;
}
#container {
    display: table-cell; margin:0 auto; background:#ccc; text-align:center; vertical-align:middle;
}

img {
    width: 50%; max-height:90%; display:inline-block;
}