JSFiddle - React, Tailwind, and code Playground

HTML

<a href="/" class="first"><span></span></a>
<a href="/" class="second"><span></span></a>

<br>
<br>
<a href="https://css-tricks.com/centering-in-the-unknown/">centering-in-the-unknown</a>

CSS

.first {
    position: relative;
    display: block;
    width:50%;
    height:150px;
    border:1px solid blue;
}

.first span {
    position: absolute;
    width:50px;
    height:50px;
    top: 50%; left: 50%;
    margin-top: -25px; margin-left: -25px;
    background:green;
    border:1px solid green;
}

.second {
    width:50%;
    height:150px;
    border:1px solid blue;
}


.second {
    text-align: center;
}
.second, .second span, .second:after {
    display: inline-block;
}
.second:after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 10px;
}
.second:after, .second span {
    vertical-align: middle;
}
.second span {
    width:50px;
    height:50px;
    background:green;
    border:1px solid green;
    vertical-align: middle;
}