JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer" style="width:100%">  
    <div id="inner">Foo foo</div>
</div>

CSS

#outer{
margin-top:100px;
height:500px; /* you can set whatever you want */
border:1px solid #ccc;
}

#inner{
border:1px solid #f00;
}

#inner{ 
position:relative;
top: 50%; 
transform: translateY(-50%); 
}