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

 .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; } /* Added CSS style */ .referral-credit-outer-circle::after { content: 'AB'; position: absolute; left: 0; right: 0; margin: auto; text-align: center; font-size: 32px; font-weight: bold; margin-top: 20px; } .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> 

Try this.

Answer 2

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> 

Answer 3

Change your css

.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;
  line-height:80px;
  text-align:center;
  transform: rotate(180deg);
}

Answer 4

This can be acheived in multiple ways i reckon, here is one with flex and pseudo content and minimal changes

 .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; display: flex; border: solid 6px #7aaeda; background: #95bee1; text-align: center; font-weight: bold; /*new code*/ flex-direction: row; align-items: center; justify-content: center; font-family: sans-serif; } /*new code*/ .referral-credit-inner-circle::before { content: "ACB"; transform: rotate(180deg); font-size: 1rem; } 

 <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 5

Adjusted CodePen with flexbox and absolute positioning examples:
Dynamic Circle Progress Bar

Code Snippet demonstrating aforementioned examples:

 .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; } /* Additional */ .referral-credit-outer-circle { position: relative; /* for the sake of demonstration */ } .referral-credit-inner-icon { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; height: 2rem; margin: auto; z-index: 1; font-size: 2rem; } .flex-eg .referral-credit-inner-icon { position: relative; } .flex-eg { display: flex; justify-content: center; align-items: center; } 

 <h3>Using <code>position: absolute;</code> on nested element</h3> <div class="referral-credit-outer-circle"> <span class="referral-credit-inner-icon" data-icon="H" style="color:">AB</span> <div class="mask-referral-credit-inner-circle" style="height: 70%"> <div class="referral-credit-inner-circle"></div> </div> </div> <hr> <h3>Using <code>display: flex;</code> on containing element</h3> <div class="flex-eg referral-credit-outer-circle"> <span class="referral-credit-inner-icon" data-icon="H" style="color:">AB</span> <div class="mask-referral-credit-inner-circle" style="height: 70%"> <div class="referral-credit-inner-circle"></div> </div> </div> <hr> <h3>More methods to align elements vertically or horizontally:</h3> <ol> <li><a href="https://codepen.io/UncaughtTypeError/pen/vWGbdb">Horizontal Alignment (Arbitrary Elements)</a></li> <li><a href="https://codepen.io/UncaughtTypeError/pen/BmKMra">Horizontal Alignment (Text Elements)</a></li> <li><a href="https://codepen.io/UncaughtTypeError/pen/XzdGqO">Vertical Alignment (Arbitrary Elements)</a></li> <li><a href="https://codepen.io/UncaughtTypeError/pen/rYeRoR">Vertical Alignment (Text Elements)</a></li> </ol> 

More methods to align elements vertically or horizontally:

1. Horizontal Alignment (Arbitrary Elements)
2. Horizontal Alignment (Text Elements)
3. Vertical Alignment (Arbitrary Elements)
4. Vertical Alignment (Text Elements)