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