Javascript 定位Div有困难

我正在创建一个score小部件，如图所示

我被困在最后一步了。我想将文本放置在数字下方，并在圆内垂直居中，如源图像所示

这是我的

$（文档）.ready（函数（）{
var start=document.getElementById（“分数”）；
开始。插入相邻的TML（'afterend'，'90
100
）；
$（'.chart'）.easyPieChart({
尺寸：160，
barColor：“黑色”，
刻度长度：0，
线宽：10，
trackColor:#e6“，
线头：“圆圈”，
动画：2000，
});
}); 

我不知道如何做馅饼，但从中间+中间开始：

<div id="container" style="
  position:relative;
  left: 100px;
  top: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
">
  <div id="text" style="
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  ">
    <span id="top" style="
      font-size: 36px;
      color: green;
    ">90.5</span>
    <br>
    <span id="bottom" style="
      font-size: 24px;
      color: green;
    ">of 100</span>
  </div>
</div>

90.5


百分之一百

更改需要更改的内容（颜色、大小等）。
移动到

等

我不知道insertAdjacentHTML（'afterend'）…-似乎添加了“after end”而不是“inside”。

试试这个：

$（文档）.ready（函数（）{
var start=document.getElementById（“分数”）；
开始。插入相邻的TML（'afterend'`
90
百分之一百
`);
$（'.chart'）.easyPieChart({
尺寸：160，
barColor：“黑色”，
刻度长度：0，
线宽：10，
trackColor:#e6“，
线头：“圆圈”，
动画：2000，
});
})；

正文{
保证金：0；
填充：0；
字体系列：无衬线；
显示器：flex；
证明内容：中心；
高度：100vh；
背景：#fff；
}
.定额货柜{
保证金：自动0；
}
.分级容器.分级箱{
宽度：160px；
高度：160px；
}
.评级容器.评级框#评级潜文本{
显示器：flex；
宽度：100%；
身高：100%；
字体大小：20px；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
#评级{
位置：绝对位置；
身高：100%；
宽度：100%；
}
.额定容器.额定箱.图表{
位置：相对位置；
字体大小：40px；
高度：160px；
颜色：#333333；
}
.分级容器.分级框画布{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
}

<div id="container" style="
  position:relative;
  left: 100px;
  top: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
">
  <div id="text" style="
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  ">
    <span id="top" style="
      font-size: 36px;
      color: green;
    ">90.5</span>
    <br>
    <span id="bottom" style="
      font-size: 24px;
      color: green;
    ">of 100</span>
  </div>
</div>