JSFiddle - React, Tailwind, and code Playground

HTML

<div class="user_body_content_container">
    <div class="subject_container" id="subject_container0" index="0">
        <div class="subject" index= "0">
            <div class="subject_wrapper">
                <div class="subject_name">AB DE VILLIERS/IKER CASSILAS</div>
                <div class="subject_completion">55%</div>
            </div>
        </div>
    </div>
</div>

CSS

.user_body_content_container
{
    display: table;
}

.subject_container
{
    width: 200px;
    height: 250px;
    border: 1px solid #eee;
    display: table-cell;
}

.subject
{
    border-radius: 50%;
    border: 1px solid #653;
    width: 175px;
    height: 175px;
    line-height: 175px;
    margin: auto; 
    margin-top: 25%;
    position: relative;
}

.subject div
{ 
    text-align: center;
    
}
.subject_wrapper
{
    line-height: normal;
    display:inline-block;
    vertical-align: middle;
}