на основе радиуса сделать текст центром круга

Question

 <span class="qs">Q{{i + 1}} <a href="#question-view"></a></span>
<div class="tooltipp text-center    bubble[ngStyle]="bubbleStyle(prof?.proficiencyBrightness, prof?.proficiencyRadius)">
</div>

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

  bubbleStyle(b, r) {
    return {
      'height': 15 + r/2 + 'px',
      'width': 15 + r/2 + 'px',
      'min-height': 28 + 'px',
      'min-width': 28 + 'px',
      'max-height': 65 + 'px',
      'max-width': 65 + 'px',
      'background-color': 'rgba(5, 117, 230,' + b/100 + ')',
      'transform': 'scale(' + b ? b/100 : 0.09 + ')',
      'position': 'relative',
      'top': 15 - 25*r/100 + 'px',
      // 'left' :3 + 'px'
    }
  }

.question-number {
  top: 25px;
  position: absolute;
  display: inline-block;
  /* display: flex; */
  left: 50%;
  margin-left: -9px;
  z-index: 2;
  font-size: 12px;
}

Answer 1

Изменения CSS Использование transform: translate

.question-number {
  top: 50%;
  position: absolute;
  display: inline-block;
  /* display: flex; */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 12px;
}