实现

.circle {
  background: gold;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="circle">text</div>

效果

总结：

• 需要固定宽高，否则会导致文字被压扁

参考文献

• stackoverflow.com/questions/4…
• www.codegrepper.com/code-exampl…

以上：如发现有问题，欢迎留言指出，我及时更正