JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divTop">divTop</div>
<div id="divBottom">divBottom
    <div id="divCenter"><div id="textCenter"><p>divCenter fadfaljdfksl;jafsd flkjasldjf</p><p> as;dfjkaksjdf</p></div></div>
</div>

CSS

html, body{
    height:100%;
    width:100%;
}
#divTop{
    height:50px;
    background:#008080;
    color:#ffffff;
    text-align:center;
    vertical-align:middle;
}
#divBottom{
    height:100%;
    width:100%;
    text-align:center;
    vertical-align:middle;
    border:thick solid blue;
}
#divCenter{
    margin-left:auto;
    margin-right:auto;
    width:50vmin;
    height:50vmin;
   border:medium solid red; 
    white-space:nowrap;
    text-align:center;	
    position:relative;
    display:block;
    top:50%;
    margin-top:-25vmin;
    
}

#textCenter{
    width:50vmin;
    margin:0 auto;
    position:absolute;
    top:50%; height:50vmin; margin-top:-25vmin;
    display:block;
}