如何在这个 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

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

试试这个。

Answer 2

改变你的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 3

试试这个：

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

使用 flexbox 和 absolute 定位示例调整了 CodePen：
Dynamic Circle Progress Bar

演示上述示例的代码片段：

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

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

How to center two letters inside this css drawn circle?

html

css

centering

演示上述示例的代码片段：

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