定位 Div 时遇到问题

Question

我正在创建一个分数小部件，如此处所示。

我被困在最后一步。 我想 position 数字下方的文本，并将它们垂直居中在圆圈内，如源图像所示。

这是我的JS 小提琴。

$(document).ready(function() {
  var beginning = document.getElementById("score");
  beginning.insertAdjacentHTML('afterend', '<div class="rating-container"><div class="rating-box"><div class="chart" data-percent="90" data-scale-color="#ffb400">90</div><p id="rating-subtext">of 100</p></div></div>');


  $('.chart').easyPieChart({
    size: 160,
    barColor: "black",
    scaleLength: 0,
    lineWidth: 10,
    trackColor: "#E6E6E6",
    lineCap: "circle",
    animate: 2000,
  });

}); 

Answer 1

我不知道如何做馅饼，但这是中心+中间的开始：

<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>

更改需要更改的内容（颜色、大小等）。
移至<style>等。

我不知道insertAdjacentHTML('afterend'... - 似乎添加了“结束后”而不是“内部”。

Answer 2

尝试这个：

 $(document).ready(function() { var beginning = document.getElementById("score"); beginning.insertAdjacentHTML('afterend', ` <div class="rating-container"> <div class="rating-box"> <div class="chart" data-percent="90" data-scale-color="#ffb400"> <div id='rating'> <div id="rating-subtext"> <div>90</div> <div>of 100</div> </div> </div> </div> </div> </div>`); $('.chart').easyPieChart({ size: 160, barColor: "black", scaleLength: 0, lineWidth: 10, trackColor: "#E6E6E6", lineCap: "circle", animate: 2000, }); });

 body { margin: 0; padding: 0; font-family: sans-serif; display: flex; justify-content: center; height: 100vh; background: #fff; }.rating-container { margin: auto 0; }.rating-container.rating-box { width: 160px; height: 160px; }.rating-container.rating-box #rating-subtext { display: flex; width: 100%; height: 100%; font-size: 20px; flex-direction: column; align-items: center; justify-content: center; } #rating { position: absolute; height: 100%; width: 100%; }.rating-container.rating-box.chart { position: relative; font-size: 40px; height: 160px; color: #333333; }.rating-container.rating-box canvas { position: absolute; top: 0; left: 0; width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="score"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js"></script>