JSFiddle - React, Tailwind, and code Playground

HTML

<div class='a'>
    <div class='b b1 center'>
        content
    </div>
</div>
<div class='a'>
    <div class='b b2 center'>
        content
    </div>
</div>

CSS

.a{
    width: 400px;
    height: 100px;
    background-color: #efefef;
    margin-bottom: 10px;
}

.b{
    position: relative;
    background-color: black;
    color: white;
}

.b1{
    width: 60px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.b2{
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

JavaScript

$.each($('.center'), function(){
    var parentHeight = $(this).parent().height();
console.log(((parentHeight - $(this).height()) / 2));
    $(this).css({
        'top' : ((parentHeight - $(this).height()) / 2) + 'px',
        'margin': '0 auto'
    });
});