JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
        <div class="inner-container">
            <p>Vertically Aligned</p>
        </div>
    </div>
</body>

CSS

html, body {
	height: 100%;
}

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

.inner-container {
	display: table-cell;
	vertical-align: middle;
}