JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html,body {
  height: 100%;
}
.cont {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ccc;
  
}
.box {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: auto;
  width: 100px;
  max-width:100%;
  max-height:100%;
  background: orange;
  transform: translateY(-50%);
}
.box:before { 
  display: block;
  content:"";
  padding-top:200%;
  height:0;
  
}