JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    
 <div class="box"></div>   
</div>

CSS

.main{ height:400px;width:400px; border:1px red dotted;position:relative}
.box{width:40px; height:40px; background:grey; }

/* for centering */
.box{ display: inline-block; }
.main{ text-align: center; }
.main:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; }