How to center two letters inside this css drawn circle?

Question

Using this Codepen example and additional CSS, how would I center the letters "AB" within the circle? https://codepen.io/joseph-mueller/pen/bNEeGw This is what I want:

.referral-credit-outer-circle {
  background: #fff;
  width: 92px;
  height: 92px;
  border-radius: 90px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 6px #666;
  margin: 20px;
  position: absolute;
}

.mask-referral-credit-inner-circle {
  transform: rotate(180deg);
  width: 100%;
  height: 50%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
}

.referral-credit-inner-circle {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  border: solid 6px #7aaeda;
  background: #95bee1;
}

<div class="referral-credit-outer-circle">
  <span class="referral-credit-inner-icon" data-icon="H" style="color:"></span>
  <div class="mask-referral-credit-inner-circle" style="height: 70%">
    <div class="referral-credit-inner-circle"></div>
  </div>
</div>

Answer 1

Try this :

.referral-credit-outer-circle{
  background: #fff;
  width: 92px;
  height:92px;
  border-radius:90px;
	box-shadow: 0 0 0 2px #fff, 0 0 0 6px #666;
  margin: 20px;
  position: absolute;

}

.mask-referral-credit-inner-circle{
  transform: rotate(180deg);
  width: 100%;
  height: 50%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
}

.referral-credit-inner-circle{
  width: 80px;
  height:80px;
  border-radius:80px;
  border: solid 6px #7aaeda;
  background: #95bee1;
}
.referral-text{
  text-align:center;
  display:block;
  line-height:92px;
  position:relative;
  z-index:2;
  font-size:20px
  
}

<div class = "referral-credit-outer-circle">
  <span class="referral-text">AB</span>
<span class="referral-credit-inner-icon" data-icon="H" style="color:"></span>
  <div class = "mask-referral-credit-inner-circle" style = "height: 70%">
    <div class = "referral-credit-inner-circle"></div>
  </div>
</div>