Текст по центру в прозрачном круге?

Question

У меня есть процентная анимация, в которой число увеличивается, пока завершается внешний ход. Эта анимация работает отлично, но мне нужно, чтобы текст был центрирован как по вертикали, так и по горизонтали, а также прозрачный внутренний круг. Есть идеи, как я мог это сделать?

function perCirc($el, end, i) {
  if (end < 0)
    end = 0;
  else if (end > 100)
    end = 100;
  if (typeof i === 'undefined')
    i = 0;
  var curr = (100 * i) / 360;
  $el.find(".perCircStat").html(Math.round(curr) + "%");
  if (i <= 180) {
    $el.css('background-image', 'linear-gradient(' + (90 + i) + 'deg, transparent 50%, #ccc 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
  } else {
    $el.css('background-image', 'linear-gradient(' + (i - 90) + 'deg, transparent 50%, #00cc00 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
  }
  if (curr < end) {
    setTimeout(function() {
      perCirc($el, end, ++i);
    }, 1);
  }
}

.perCirc {
  position: relative;
  text-align: center;
  width: 240px;
  height: 240px;
  border-radius: 100%;
  background-color: #00cc00;
  /* the color of the percent    */
}

.perCirc .perCircInner {
  position: relative;
  top: 10px;
  left: 10px;
  text-align: center;
  width: 220px;
  height: 220px;
  border-radius: 100%;
  background-color: hsla(0, 0%, 73%, 1.00);
  /* the color of the inner circel    */
}

.perCirc .perCircInner div {
  position: relative;
  color: #4E1414;
}

.perCirc .perCircStat {
  font-size: 30px;
  margin: 0 auto;
}

<div id="sellPerCirc" class="perCirc">
  <div class="perCircInner">
    <div class="perCircStat">0%</div>
    <div>Complete</div>
  </div>
</div>

Answer 1

Добавьте эти атрибуты в свой perCircInner класс

    display: flex;
    flex-direction: column;
    justify-content: center;