JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
    <img src="http://placehold.it/200x200"  />
    <figcaption>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  </figcaption> 

</figure>

CSS

figure {
    width: 100%;
  position: relative;
  display: block; }

img {width: 100%;}

figcaption {
  position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

figcaption span {
  display: table-cell;
  vertical-align: middle; }