#timer { width: 300px; height: 300px; border-radius: 50%; border: 2px dashed blue; position: relative; } #timer #Tim { position: absolute; font-size: 24px; font-weight: bold; } #timer #m { position: absolute; top: 50px; left: 50px; font-size: 24px; font-weight: bold; } #timer #s { position: absolute; top: 50px; right: 50px; font-size: 24px; font-weight: bold; } #timer #ms { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); font-size: 24px; font-weight: bold; } <div id="timer"> <div id="Tim">Timer</div> <div id="m-s">ms</div> <div id="m">00</div> <div id="s">00</div> <div id="ms">00</div> </div> 更改布局内容呈现: Timer m s(刚好位于第二个、第四个0的正上方) 00:00 00 上述内容刚好被蓝色圆线包裹

以下是更改后的代码和布局：

<style>
  #timer {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 2px dashed blue;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #timer #Tim {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  #timer #m {
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-right: 10px;
  }
  
  #timer #s {
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 10px;
  }
  
  #timer #ms {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
  }
</style>

<div id="timer">
  <div id="Tim">Timer</div>
  <div>
    <span id="m">00</span>
    <span>m</span>
    <span id="s">00</span>
    <span>s</span>
  </div>
  <div id="ms">00</div>
</div>

布局效果：

+----------------+
|      Timer     |
|     00m 00s    |
|       00       |
+----------------+