JSFiddle - React, Tailwind, and code Playground

HTML

<div class="score-container sc-btn-cont">    
    <div class="score">
        50%    
    </div>
</div>

SCSS

$box-outline-color:         #d3d3d3;
@mixin box-center(){
/* Firefox */
  display:-moz-box;
  -moz-box-orient:horizontal;
  -moz-box-pack:center;
  -moz-box-align:center;

/* Safari and Chrome */
  display:-webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-pack:center;
  -webkit-box-align:center;

/* W3C */
  display:box;
  box-orient:horizontal;
  box-pack:center;
  box-align:center;

  /* IE10 -Doesn't work yet! */
  display: -ms-box;
  -ms-box-orient:horizontal;
  -ms-box-pack:center;
  -ms-box-align:center;
}





.score-container{
    height: 100px;
    
  }
.score {
    @include box-center();
    text-align: center;
    border: 4px solid $box-outline-color;
    font-size: 24px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    padding: 5px;
    margin-top: 5px;

  }