JSFiddle - React, Tailwind, and code Playground

HTML

<div class="father">
  <div class="son">box1</div>
</div>

CSS

div.father {
  display: flex;

    align-items: center;
    border: 1px solid black;
    height: 300px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
}

div.son {
 vertical-align: middle;
 display: table-cell;
 border: 1px solid black;
    height: 100px;
    width: 100px;
}