JSFiddle - React, Tailwind, and code Playground

by Jiff Pom

HTML

<div id="outer-div">
    <div id="inner_div">This the inner-div to be centered inside outer-div</div>
</div>

CSS

#outer-div {
  background: red;
  width: 100%;
  height: 50%;
}

#inner_div {
    width: 100%;
    height: 25%;
    background: blue;
    color: white;
    top: 50%;
    position: relative;
    transform: translate(0, -50%);
}

html, body {
  height: 100%;
}