JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Centering with "spreader"</h1>
<div class="parent">
    <div class="spreader"></div>
     <div class="child">
         PINK SQUARE SHOULD BE CENTERED.
         BOTH VERTICALLY AND HORIZONTALLY
    </div>
</div>

CSS

h1 {   font: 13px Verdana;    }

.parent {
   background: linen;
   width: 300px;  
   height: 300px; 
   text-align: center; 
}

.child {
    background: pink;  
    width: 200px; 
    height: 200px;
    display: inline-block;
    text-align: left;
    vertical-align: middle; 
}

.spreader {
   background: red;   
   display: inline-block;
   height: 100%; 
   vertical-align: middle; 
   visibility: hidden; 
}