JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html, body {
    height: 100%;
}

.main-container {
    border: 1px solid;
    height: auto;
    min-height: 50%; /* important */
    text-align: center;
}

.main-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.content {
    display: inline-block;
    vertical-align: middle;
}