JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="super-centered">
    <div class="content">
        <p>I am centered like a boss!</p>
        <p>No, wait, I'm not!</p>
        <p>CSS fail...</p>
    </div>
</div>
</body>

CSS

.super-centered {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
    border:1px solid red;
}
.content {position:relative;
    margin:-50% 50% 50% -50%;
    background:#fff;
    border:1px solid #808184;
    opacity:0.8;
    /*width:500px;*//*<--comment me in and be amazed*/
}