JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<div class="parentbox">
    <div class="childbox">
        I shall be in the middle of parentbox regardless of its size!
    </div>
</div>

CSS

.parentbox {
    width:500px;
    height:400px;
    border-style:solid;
    
    text-align: center;
    font: 0/0 a;
}

.parentbox:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.childbox {
    display: inline-block;
    vertical-align: middle;
    font: 1rem/1 Arial, sans-serif;  /* <-- reset the font */
    
    padding: 5px;
    border: 2px solid black;
}