如何创建一个中心带有数字的圆圈,该圆圈可以缩放以适合 HTML/CSS 中的圆圈?

How to create a circle with a number in the center that scales to fit the circle in HTML/CSS?

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

我认为这段代码可以解决您的问题。只需确保 font-size 和父级的宽度相同(本例中为 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>