JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<div id="outer" class="greenBorder"> 
    <div id="middle"> 
        <div id="inner" class="greenBorder"> Personal Information<br>Personal Information<br>Personal Information
            
        </div> 
    </div> 
</div>

CSS

#outer {
    height: 400px; 
    overflow: hidden; 
    position: relative; 
    width: 100%;
}
        
#outer[id] {
    display: table; 
    position: static;
}
        
#middle {
    position: absolute; 
    top: 50%; 
    width: 100%; 
    text-align: center;
} /* for explorer only */
        
#middle[id] {
    display: table-cell; 
    vertical-align: middle; 
    position: static;
}
      
#inner {
    height: ;
    position: relative; 
    top: -50%; 
    text-align: center;
} /* for explorer only */
        
#inner {
    margin-left: auto; 
    margin-right: auto;
}

div.greenBorder {
    border: 1px solid green; 
    background-color: ivory;
}