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%;
    overflow: auto;
}

#inner_div {
    width: 100%;
    height: 25%;
    background: blue;
    color: white;
    margin-top: 12.5%;
    margin-bottom: 12.5%;
}

html, body {
  height: 100%;
}