JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.box {
   height: 500px;
    text-align: center;
    background: blue;
 }
.box:after {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.center {
    display: inline-block;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    background: yellow;
}