JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.positioner {
    position: absolute;
    top: 50%;
    left: 50%;
    
    width: 25%;
    padding-bottom: 25%;
}

.box {
    background-color: purple;
    position: absolute;
    top: -50%;
    left: -50%;
    
    width: 100%;
    padding-bottom: 100%;
}