Javascript div作为圆圈，显示中间的百分比

我有一个div作为一个圆圈，内部文本以百分比的形式显示值，比如说（20%）。问题是内部文本没有精确显示在圆的中心

内部文本是基于某些百分比结果的动态值。圆的半径基于结果返回的百分比值。返回的百分比值应精确显示在圆的中心。有人能帮我吗

谢谢

这是密码

<style>
    #circle {
        border: 1px solid red;
        border-radius: 50%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background:blue;
    }
</style>

<div id="circle"></div>  

<script>
    $(function(){
        var maxWidth = 500, // This is the max width of your circle
        percent = Number($('#result').text()); // This is the percentage value
        percent = percent / 100;

        $("#circle").css({
            "width" : maxWidth * percent,
            "height" : maxWidth * percent,
        });
        circle.innerText =$('#result').text() + "%";
</script>

#圈{
边框：1px纯红；
边界半径：50%；
-moz框大小：边框框；
框大小：边框框；
背景：蓝色；
}
$（函数（）{
var maxWidth=500，//这是圆的最大宽度
百分比=数字（$（“#结果”）.text（）；//这是百分比值
百分比=百分比/100；
$（“#圆”）.css({
“宽度”：最大宽度*百分比，
“高度”：最大宽度*百分比，
});
circle.innerText=$（'#result'）.text（）+“%”；

您可以在保存文本的圆圈内添加另一个

DIV

，并将

位置：相对
添加到CSS中的
#圆圈中。还可以添加以下内容：

#circle>* {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

 <代码>位置：绝对< /代码>和代码> >顶部：50% < /代码> />代码>左：50%代码>将在代码的中间放置内径<代码> div <代码>的左上角。<代码>转换>代码>将其自身大小的50%移到左/顶部。
 < p>在包含文本和添加<代码> POS的圆内可以添加另一个<代码> div <代码> >条件：相对于CSS中的
#圆圈
。还添加以下内容：

#circle>* {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

 <代码>位置：绝对< /代码>和代码>顶部：50% < /代码> />代码>左边：50% < /C> >将放置内圈<代码>左上方的DIG/<代码>中间。<代码>转换>代码>将其自身大小的50%移到左/顶部。
 < P>这是我的工作。

display: table-cell;
vertical-align: middle;

您可以检查小提琴：

这对我来说是可行的

display: table-cell;
vertical-align: middle;

您可以检查小提琴：

如果同一页上有五个圆圈显示结果？有人能帮忙吗？如果同一页上有五个圆圈显示结果？有人能帮忙吗。