JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-container">
    <div class="child-container">
        <div class="content">
            <h2>Header</h2>
            <p>Lorem ipsum</p>
        </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
}

.main-container {
   display:table;
    border: 1px solid;
    height: auto;
    min-height: 50%; /* important */
    width:100%;
}

.child-container {
    display: table-row;
    height: 100%;
    width: 100%;
}

.content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}