JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myoutercontainer" style=" height: 400px; ">
    <div class="myinnercontainer  myoutercontainer " style="height: 10em;">
            <div class="myinnercontainer"> 
                <p>Hey look! I'm vertically centered!</p>
                <p>How sweet is this?!</p>
            </div>

    </div>
</div>

CSS

.myoutercontainer { 
    position:relative; 
    background-color: #888888;
       
    text-align: center; 
}

.myinnercontainer { 
    display: inline-block;
    vertical-align: middle;  
    background-color: yellow;
 
}

.myoutercontainer:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
 }