JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test"></div>

CSS

*{
    padding: 0;
    margin: 0;
}

.test{
    width: 400px;
    height: 400px;
    background: #ccc;
    position: relative;
}
.test:before{
    content: 'CENTER';
    position: absolute; top: 50%; left: 50%;
    background: #000;
    width: 128px;
    height: 128px;
    margin: -64px 0 0 -64px;
    color: #fff;
    line-height: 128px;
    text-align: center;
}