JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-container">
  <div class="header">header</div>
  <div class="image-container">
    <img src="http://weknownyourdreamz.com/images/circle/circle-08.jpg" />
  </div>
  <div class="footer">footer</div>
</div>

CSS

.main-container{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: flex;
  flex-direction: column;
}
.header, .footer{
  width:100%;
  height: 1em;
  background-color: red;
}
.image-container{
  height: 100%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img{
  max-height:100%;
  max-width: 100%;
}