JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="wrapper">
    <div id='box'>
    </div>
  </div>
</body>

CSS

body{
  border: 3px solid black;
}
.wrapper {
  height:100vh;
  display: flex;
  align-items:center;
}
#box{
   border: 3px solid red;
   width:60vw;
   height: 40vw;
   vertical-align: middle;
   margin:0 auto;
}