Can't figure out 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 class name "text-to-center" to be inside the circle.
Codepen

HTML:

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

CSS:

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

>Solution :

Given you have asked to avoid position: absolute.

You can add display:flex to your text span, and use the top property to align. You can adjust it’s value as per your need

.text-to-center {
    top: 160px;
    z-index: 200;
    position: relative;
    display: flex;
    justify-content: center;
}

Working Code below:

@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;
}

body .outer-circle {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  box-shadow: 0 0 5px 15px rgba(47, 43, 140, 0.1);
  background-image: radial-gradient(#2f2b8c 0, #2f2b8c 0 50%, #2f2b8c 33 90%);
}

body .wrapper {
  animation: pulse 8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
  position: relative;
}

body .wrapper .breath {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  position: relative;
  background-color: #000215;
  animation: rotate 16s linear infinite;
}

body .wrapper .breath::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(47, 43, 140, 0.3);
}

body .wrapper .breath::after {
  content: "";
  display: block;
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  background-color: #000215;
}

body .wrapper .breath .flare1 {
  width: 240px;
  height: 240px;
  content: "";
  display: block;
  border-radius: 50px;
  background-image: radial-gradient(#d904b5 63, #d904b5 0 60%);
  position: absolute;
  left: -70px;
  top: -70px;
  z-index: -1;
}

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

.text-to-center {
  top: 160px;
  z-index: 200;
  position: relative;
  display: flex;
  justify-content: center;
}

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