JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child">
    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics</p>
  </div>
</div>

CSS

body,
html {
  padding: 0px;
  margin: 0px;
}

.parent {
  width: 300px;
  height: 200px;
  padding: 30px;
  display: table;
  background-color:#cccccc;
}

.child {
  display: table-cell;
  vertical-align: middle;
  background-color:#f7c100;
}

p {
  display: block;
  text-align: center;
  color: #FFFFFF;
  margin: 0px;
}