JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item">
      <p class="text-center">Vertically center me</p>
    </div>
  </div>
</main>

CSS

main {
   height: 100%;
   width: 100%;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.flex-item {
  background-color: #ebebeb;
  height: 3rem;
  margin: 0.5em auto;
  width: 100%;
}

.text-center {
  text-align: center;
}