如何在圆形动画内居中文本？避免使用position absolute

我找到一个炫酷的动画效果，想要使用它，但不知道如何将类名为text-to-center的文本居中显示在圆形内部，希望尽可能避免使用position: absolute属性。相关代码如下：

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
}

完全可以不用position: absolute，用Flexbox布局就能轻松实现文本居中，还不会破坏原有动画效果，具体修改如下：

1. 修改.outer-circle的CSS #

给父容器.outer-circle添加Flex布局属性，让内部元素自动居中：

.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%);
  /* 添加以下Flex属性 */
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 调整.text-to-center的层级和样式 #

设置z-index确保文本显示在动画元素上方，同时可按需调整字体样式：

.text-to-center {
  z-index: 1;
  font-size: 2rem;
  font-weight: bold;
}

原理说明 #

Flexbox是现代CSS布局方案，通过给父容器设置display: flex，再配合justify-content: center（水平居中）和align-items: center（垂直居中），就能让内部的text-to-center自动居中，全程不需要绝对定位。设置z-index:1是因为.wrapper里的动画元素有层级，避免文本被遮挡。

内容的提问来源于stack exchange，提问作者thisisjohnspeaking