Having Trouble Positioning a Div

Question

I'm creating a score widget, as seen here.

I'm stuck on the final step. I want to position the text beneath the number, and center them vertically inside the circle, as seen in the source image.

This is my JS Fiddle.

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

Try this:

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

Answer 2

I don't know how to do the pie thing, but here's a start on center+middle:

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

Change what needs changing (colors, size, etc.).
Move to <style>, etc.

I don't know about insertAdjacentHTML('afterend'... - seems to add "after end" and not "inside".