JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div-pai">
    
</div>
<div class="div-pai2">
    <div class="div-filho"></div>
</div>

CSS

.div-pai{width: 400px;height: 400px; background-color: black; position: fixed; opacity: .7; }
.div-pai2{width: 400px;height: 400px; position: fixed; }
.div-filho{width: 150px; height: 150px; position:absolute; top: 50%; left: 50%; background: blue; margin-top: -75px; margin-left: -75px;}