JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<div id="parent">
    <div id="children">this is centered</div>
</div>

CSS

#parent {
    height: 400px;
    transform-style: preserve-3d;
    background: #DDD;
}

#children {
    position: relative;
    height: 200px;
    top: 50%;
    transform: translateY(-50%);
    background: #EEE;
    text-align: center;
}