JSFiddle - React, Tailwind, and code Playground

HTML

<section class="text">
  <p>I'm vertically and horizontolly aligned!
    (Remove text-align:center; to remove horizontol center)</p>
</section>

CSS

section {
  display: block;
    background: #433669;
  margin: 0 auto 1em;
  height: 140px;
    color: white;
    text-align:center;
  }

.text p {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
    line-height:100%;
}