JSFiddle - React, Tailwind, and code Playground

by sundaramkumar

HTML

<div class="box">
   <div class="box-overlay">
   <span>Text</span>
   </div>
</div>

CSS

.box{
  width:400px;
  height:400px;
  border:1px solid red;
  background:rgba(0,0,0,0.5);
  /* background-color:white; */
}

.box-overlay{
  display:table;
  height:100%;
  /* background:rgba(0,0,0,0.5); */
  width:100%;
}

.box-overlay span{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  height:100%;
  width:100%;  
}