JSFiddle - React, Tailwind, and code Playground

by Joshua Powell

HTML

<body>
<div class="content">
    <h1>Est eu constituto theophrastus.</h1>
    <p>Est eu constituto theophrastus, in quo illum appareat, cu congue soleat reprehendunt per. Id per impetus reprimique omittantur, doming minimum eam ei. Has putent impetus pertinax id, pri congue nostrud dignissim ex, vel ea ponderum delicata. In legere dictas bonorum pri, cu oporteat interesset sed, hinc mazim consulatu sit cu.</p>
    <p>Est eu constituto theophrastus, in quo illum appareat, cu congue soleat reprehendunt per. Id per impetus reprimique omittantur, doming minimum eam ei. Has putent impetus pertinax id, pri congue nostrud dignissim ex, vel ea ponderum delicata. In legere dictas bonorum pri, cu oporteat interesset sed, hinc mazim consulatu sit cu.</p>
    <p>Est eu constituto theophrastus, in quo illum appareat, cu congue soleat reprehendunt per. Id per impetus reprimique omittantur, doming minimum eam ei. Has putent impetus pertinax id, pri congue nostrud dignissim ex, vel ea ponderum delicata. In legere dictas bonorum pri, cu oporteat interesset sed, hinc mazim consulatu sit cu.</p>
    <div class="center">
    </div>
</div>
</body>

CSS

.content {
    position: relative;
    top: 50px;
    background: rgba(0, 0, 0, 0.3);
    width: 60%;
    margin: 0 auto;
}

.center{
    position: fixed;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2);
    left:calc(50% - 50px/2);
}