JSFiddle - React, Tailwind, and code Playground

HTML

<div class="position--relative">
  <div class="position--absolute">
    <div class='table'>
      <div class='cell'>
        <h1>POSITION THIS TEXT CENTRALLY INSIDE THE CONTAINER</h1>
      </div>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.position--relative {
  position: relative;
  width: 100%;
  height: 100%;
}

.position--absolute {
  position: absolute;
  width: 100%;
  height: 100%;
}

.table {
  display: table;
  width: 100%;
  height: 100%;
}

.cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}