JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: fixed;top:0;left:0;width:100%;height:100%">
  <div class="holders">
    <div class="holder">
      <div class="text">
        <p>
          This is text that should be in the center of the block vertically and horizontally
        </p>
      </div>
      <img class="img" src="http://www.fnordware.com/superpng/pnggrad8rgb.png" />
    </div>
  </div>
</div>

CSS

.holders {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -150px; /*half of image width*/

}
.holder {
  float: left; /*this cannot be changed because we have a row of blocks like the example one in the bottom*/
  position: relative;
}

.text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.text p {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
}
.img {
  width: 100%;
  height: auto;
}