JSFiddle - React, Tailwind, and code Playground

by suresh ponnukalai

HTML

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

CSS

.position--relative
{
  position:relative;
  height:500px;
  background:#ff00ff;
}
.position--absolute
{
  position:absolute;  
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}