Html – How to center a text inside this circle animation?

I found this cool animation. I want to use, but I can’t figure out how to center a text inside it. I would like to avoid using position absolute if possible.

I am expecting the text with the class name "text-to-center" to be inside the circle.

Codepen

<div class="outer-circle">
  <span class="text-to-center">0:00:00</span>
  <div class="wrapper">
    
    <div class="breath">
      <div class="flare1"></div>
      <div class="flare2"></div>
    </div>
  </div>
</div>

@keyframes pulse {
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(0.6);
  }
  80% {
    transform: scale(1);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body {
  background-color: #000215;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  
  .outer-circle {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    box-shadow: 0 0 5px 15px rgba(#2F2B8C, 0.1);
    background-image: radial-gradient(#2F2B8C00, #2F2B8C00 50%, #2F2B8C33 90%);
  }
  
  .wrapper {
    animation: pulse 8s cubic-bezier( 0.7, 0, 0.3, 1 )  infinite;
    position: relative;
    
    .breath {
      width: 300px;
      height: 300px;
      border-radius: 150px;
      position: relative;
      background-color: #000215;
      animation: rotate 16s linear infinite;
      
      &::before {
        content: '';
        position: absolute;
        top: 0; 
        right: 0; 
        bottom: 0; 
        left: 0;
        z-index: -1;
        margin: -3px;
        border-radius: inherit;
        background: linear-gradient(135deg, #D904B5, #2F2B8C);
        box-shadow: 0 0 14px 15px rgba(#2F2B8C, 0.3);
      }
      
      &::after {
        content: "";
        display: block;
        position: relative;
        width: 300px;
        height: 300px;
        border-radius: 150px;
        background-color: #000215;
      }
      
      .flare1 {
        width: 240px;
        height: 240px;
        content: "";
        display: block;
        border-radius: 50px;
        background-image: radial-gradient(#D904B563, #D904B500 60%);
        position: absolute;
        left: -70px;
        top: -70px;
        z-index: -1;
      }

      .flare2 {
        width: 240px;
        height: 240px;
        content: "";
        display: block;
        border-radius: 50px;
        background-image: radial-gradient(#2F2B8C63, #D904B500 60%);
        position: absolute;
        right: -70px;
        bottom: -70px;
        z-index: -1;
      }
    }
  }
}

.text-to-center {
 // want to get this inside the circle, centered. Would like to avoid position absolute if possible
}

Any way to achieve this without using position absolute?