html - 如何创建一个中心有一个数字的圆圈，该圆圈可以缩放以适应 HTML/CSS 中的圆圈？

Question

圆圈中的数字有很多解决方案，但它们使用固定大小。如何为圆形 div 设置样式以包含居中文本或最大可能字体的数量以适合圆形？

Answer 1

我认为这段代码可以解决您的问题。只需确保字体大小和父项的宽度相同，（本例中为 5 rem）。

div{
  font-size: 5rem;
  width: 5rem;

  background-color: aquamarine;
  padding: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

<div>5</div>