JSFiddle - React, Tailwind, and code Playground

HTML

<div class="l1">
  <div class="l2">
    <div class="l3">
      Centered content
    </div>
  </div>
</div>

CSS

html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}

div.l1
{
  min-height: 100%;
  background: red;
}

div.l2
{
  width: 100%;
  height: 100%;
  background: yellow;
  
  position: relative;
}

div.l3
{
  width: 100%;
  height: 200px;
  margin-top: -100px;
  top: 50%;
  
  text-align: center;
  
  position: absolute;
  background: green;
}