JSFiddle - React, Tailwind, and code Playground

HTML

<section class="block-of-text">
  <p>
Text I want vertically and horizontally centered.</p>
</section>

CSS

body {
    background-color: #9E5A5B;
}
body,td,th {
    font-size: 36px;
    color: #000000;
}
.block-of-text p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}