JSFiddle - React, Tailwind, and code Playground

by ScottRippey

HTML

<div class="vert-cent-container">
    <div class="vert-cent">
        Hi
    </div>
</div>

CSS

div {
    background: hsla(0,100%,95%,0.5);
    border: 1px solid red;
}
.vert-cent-container {
    height: 400px;
    display: table-cell;
    vertical-align: middle;
    --display: table;
}

.vert-cent {
    height: 200px;
    --display: table-cell;
    --vertical-align: middle;
}