如何实现三步流程的响应式圆形、居中水平线及圆心居中数字？

我正在开发一个三步流程程序，需要实现以下效果：

• 响应式的圆形，确保宽高一致；
• 水平线居中显示；
• 数字居中放置在圆形内部。

现有代码如下：

原CSS代码 #

.DCQ_Container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.Progress_Bar {
  display: flex;
  justify-content: center;
  border: 3px solid royalblue;
  align-items: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: whitesmoke;
  background-color: green;
  text-align: center;
}

.HR_line {
  border: 2px solid grey;
  flex-grow: 0.1;
  margin: 0;
}

原HTML代码 #

<div class="DCQ_Container">
  <h1 class="Steps_Head"> DCQ Step 1 / 3 </h1>
  <div class="Progress_Bar">
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>1</p>
      </div>
      <p>User Name</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>2</p>
      </div>
      <p>Location</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>3</p>
      </div>
      <p>Buisnesss</p>
    </div>
  </div>
</div>

针对三个需求，修改后的代码如下，附带关键改动说明：

修改后的CSS代码 #

.DCQ_Container {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0 1rem; /* 可选：避免移动端内容贴边 */
}

.Progress_Bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none; /* 移除原边框，需保留可取消注释 */
  gap: 0.5rem; /* 可选：给步骤和线条加间隙 */
}

.Circle_Text_Container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1; /* 让每个步骤容器占比均等 */
}

.circle {
  width: 6vw; /* 相对单位实现响应式，可按需调整 */
  aspect-ratio: 1; /* 强制宽高比1:1，确保始终是圆形 */
  border-radius: 50%;
  color: whitesmoke;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem; /* 可选：调整数字大小 */
}

.circle p {
  margin: 0; /* 清除p标签默认边距，避免数字偏移 */
}

.HR_line {
  height: 2px; /* 直接用高度控制线条粗细 */
  background-color: grey;
  flex-grow: 1; /* 让线条填充步骤间剩余空间 */
}

修改后的HTML代码 #

<div class="DCQ_Container">
  <h1 class="Steps_Head"> DCQ Step 1 / 3 </h1>
  <div class="Progress_Bar">
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>1</p>
      </div>
      <p>User Name</p>
    </div>
    <div class="HR_line"></div> <!-- 用div替代hr，样式更易控制 -->
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>2</p>
      </div>
      <p>Location</p>
    </div>
    <div class="HR_line"></div>
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>3</p>
      </div>
      <p>Buisnesss</p>
    </div>
  </div>
</div>

关键改动说明 #

1. 响应式圆形：

   • 用aspect-ratio: 1强制宽高比1:1，无论宽度怎么变都能保持圆形；
   • 宽度使用vw相对单位，实现随屏幕尺寸自动缩放，也可替换为em/rem或百分比。

2. 水平线居中显示：

   • 替换<hr>为<div>，避免浏览器默认样式干扰，通过height和background-color定义线条；
   • flex-grow: 1让线条自动填充步骤间的剩余空间，配合justify-content: space-between实现均匀分布，align-items: center保证线条与圆形垂直居中。

3. 圆形内数字居中：

   • 给.circle添加flex布局属性，实现数字水平垂直双居中；
   • 清除<p>标签默认边距，避免数字位置偏移，也可直接将数字写在.circle标签内（删除<p>），效果一致。

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