JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

CSS

#myoutercontainer { 
    position:relative; 
    background-color: #888888;
    height: 400px;   
    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 */
 }