html - HTML如何在精确的中心绘制带有大量数字的圆圈？

Question

所以我试图在一个大圆圈上显示一个像 99 这样的大数字，我读过这个并使用了它的代码，但是这个数字并没有在正中间对齐。这是我到目前为止所拥有的：

.circle {
  width: 300px;
  height: 300px;
  margin-top: 20px;
  margin-left: 20px;
  border-radius: 50%;
  font-size: 200px;
  color: #fff;
  line-height: 500px;
  text-align: center;
  background: #000;
}

<div class="circle" id="date">99</div>

标签： htmlcss

Answer 1

您将线高设置为大于区域高度。

line-height: 300px;

演示