JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <p class="child">
        I will be aligned centered
        <br> Vertically and Horizontally
    </p>
</div>

CSS

.parent {
  display: flex; /* IMPORTANT CSS */
  height: 200px;
  width: 90%;
  border: 2px solid #f9579d;
}
.child {
  margin: auto; /* IMPORTANT CSS */
  text-align: center;
  background: #f4bad3;
  padding: 20px;
}