JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

*{margin:0; padding:0;}

.box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

.hcenter{
  display: relative;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}