JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="inner">
    <h2>This is a title</h2>
    <img src="https://thesingleplayermode.files.wordpress.com/2013/05/pokemon-banner.jpg">
  </div>
</div>

<br>

<div class="container">
  <div class="inner">
    <h2>This is a title</h2>
    <img src="http://vignette3.wikia.nocookie.net/mrmen/images/d/d2/Mrtallimage.png/revision/latest?cb=20130222100629">
  </div>
</div>

CSS

.container{
    width: 40%;
    height: 200px;
    background: lightgrey;
    position: relative;
}
.inner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
img{
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}
h2{
    margin: 0;
    position: absolute;
    top: 0;
}