JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vcenter">
        <p>Text</p>
    </div>


      <div class="vcenter">
          <p>Text<br />Text</p>
    </div>

   <div class="vcenter">
       <p>Text<br />Text<br />Text</p>
    </div>

CSS

div{
    margin:5px;
    text-align:center;
}

.vcenter{
    background:#eee;
    width: 200px;
    height: 200px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
    
.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
}