我在StackOverflow上找到了这个例子：
单独使用css绘制圆
这太好了。但是我想知道如何修改那个例子，这样我就可以在圆圈中间包含文本了？
我还发现了这一点：在CSS（像iphone通知徽章）中垂直和水平居中的圆形文本
但出于某种原因，这对我不起作用。当我创建以下测试代码时：
<div class="badge">1</div>
我得到的不是圆形，而是椭圆形。我正在尝试使用代码，看看如何使其工作。
将line-height设置为与div的高度相同的值，将显示垂直居中的一行文本。在本例中，高度和行高为500px。
JsFiddle
null
.circle {
width: 500px;
height: 500px;
line-height: 500px;
border-radius: 50%;
font-size: 50px;
color: #fff;
text-align: center;
background: #000
}<div class="circle">Hello I am A Circle</div>