JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<figure>
  <img src="http://webentwicklung.ulrichbangert.de/images/2015-02-28_Gegensteine_03.jpg">
  <figcaption>
  Dein Text
  </figcaption>
</figure>

CSS

figure {
  width: 100%;
  position: relative;
  margin: 0;
  display: inline-block;
}

figure img {
  width: 100%;
  vertical-align: top;
}

figcaption {
  vertical-align: top;
  background-color: lightblue;
  position: absolute;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}