JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
        <div id="subbox">
            content goes here
        </div>
    <div id="special">
         center me always!
    </div>
</div>

CSS

#box{margin: auto; background: #000; position: relative; z-index: 1; width: 300px; height: 300px;}
#subbox{background: #ccc; position: absolute; width: 50px; height: 50px; z-index: 3; top: 10px; left: 10px;}
#special{background: #ccc; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px; z-index: 5;}