CSS圆形多步进度条添加下方文字后如何保持进度线居中

问题现象 #

使用HTML/CSS实现圆形多步进度UI组件时，在圆形图标下方添加说明文字后，贯穿步骤条的进度连接线出现下移偏移；缩小浏览器宽度时，进度线长度会同步缩短出现错位。
偏移核心原因：步骤项容器高度会随下方文本长度变化被撑开，原有进度线使用top:50%相对容器总高度定位，导致定位基准随文本高度偏移。

效果对比 #

• 添加说明文字前正常效果：
  
• 添加文字后进度线下移偏移效果：
  
• 小屏幕下进度线缩短错位效果：
  

原有问题代码 #

App.js #

import CheckIcon from "@mui/icons-material/Check";
import "./styles.css";

export default function App() {
  const steps = [1, 2, 3, 4, 5];
  return (
    <>
      <div class="container">
        <div class="progress-container">
          <div class="progress" id="progress"></div>
          {steps.map((val) => (
            <div>
              <div className={`circle ${val === 4 ? "active" : ""}`}>
                {val === 4 ? <CheckIcon sx={{ fontSize: "3rem" }} /> : null}
              </div>
              <div className="test">
                {val % 2 === 0
                  ? "Conservative"
                  : "Somewhat Conservative but it is okay"}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

style.css #

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  max-width: 100%;
  width: 700px;
}

.progress-container::before {
  content: "";
  background-color: #767676;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  z-index: -1;
}

.progress {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  z-index: -1;
  transition: 0.4s ease;
}

.circle {
  background-color: #fff;
  color: #999;
  border-radius: 50%;
  height: 85px;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #767676;
  transition: 0.4s ease;
  cursor: pointer;
  font-size: 20px;
}

.circle.active {
  border-color: #3769ff;
  background-color: #3769ff;
  color: #ffffff;
}

.test {
  max-width: 85px;
}

修复方案 #

核心修改点 #

• 放弃使用百分比相对容器高度定位进度线，改用固定top值对齐圆形垂直中心，定位基准不受下方文本高度影响
• 调整进度线左右偏移量和容器内边距，保证进度线起止点始终对齐圆形中心，适配不同屏幕宽度
• 给步骤项、圆形元素设置固定宽度和防压缩属性，避免小屏幕下布局挤压错位

修改后完整CSS代码 #

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  max-width: 100%;
  width: 700px;
  /* 左右留出圆形半径宽度，匹配进度线偏移 */
  padding: 0 42.5px;
  box-sizing: border-box;
}

.progress-container::before {
  content: "";
  background-color: #767676;
  position: absolute;
  /* 固定top值为圆形高度的1/2，直接对齐圆心，不受文本高度影响 */
  top: 42.5px;
  left: 42.5px;
  right: 42.5px;
  height: 4px;
  width: auto;
  z-index: -1;
}

.progress {
  position: absolute;
  /* 和背景线保持相同top定位，始终对齐圆心 */
  top: 42.5px;
  left: 42.5px;
  height: 4px;
  width: 0%;
  z-index: -1;
  transition: 0.4s ease;
}

/* 步骤项容器统一样式 */
.progress-container > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 85px;
}

.circle {
  background-color: #fff;
  color: #999;
  border-radius: 50%;
  height: 85px;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #767676;
  transition: 0.4s ease;
  cursor: pointer;
  font-size: 20px;
  /* 边框计入总宽高，保证定位值计算准确 */
  box-sizing: border-box;
  /* 禁止圆形被压缩变形 */
  flex-shrink: 0;
}

.circle.active {
  border-color: #3769ff;
  background-color: #3769ff;
  color: #ffffff;
}

.test {
  max-width: 85px;
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
}

适配说明 #

修改后无论下方说明文本长度多少、屏幕宽度如何缩放，进度连接线都会始终保持在圆形垂直居中位置，不会出现偏移、错位问题。

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