Center text in svg

Question

I know that this question as already been asked before but the solutions I saw didn't worked for me. I have the code below but as you can see the text in not centred in the middle of the circles

svg{
width :30%
}
.circle--out,.circle--in {
    fill: none;
}
.circle--out {
    stroke-width: 20px;
    stroke: black;
    z-index: 1;
}
.circle--in{
stroke-width: 10px;
    stroke: white;
    transform: rotate(-90deg);
    transform-origin: 50%;
 }
 .text{
  font-size:3rem;
 }

<svg class="circle_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" data-class-link="myne" data-size="desktop">
                  <circle class="circle--out" cy="60" cx="60" r="50"></circle>
                  <circle class="circle--in" cy="60" cx="60" r="50" style="stroke-dasharray: 301.2, 313.652; animation-name: circleAnimation;"></circle>
                <text class="text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" style="
    font-size: 4rem;
">99</text></svg>

Answer 1

Use alignment-baseline="central" instead of middle