如何在这个css绘制的圆圈内居中两个字母？

Question

使用此Codepen示例和其他CSS，我如何将圆圈中的字母“AB”居中？ https://codepen.io/joseph-mueller/pen/bNEeGw 这就是我想要的：

.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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

试试这个。

Answer 2

试试这个：

＆＃13;

＆＃13;

.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
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

更改你的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

我可以通过多种方式实现这一点，这里有flex和伪内容以及最小变化

.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

调整后的CodePen包含flexbox和absolute定位示例：
的 Dynamic Circle Progress Bar

代码片段演示上述示例：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更多垂直或水平对齐元素的方法：

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