如何让分隔线元素在重复步骤元素间居中对齐？

需要实现的步骤区块效果如下：

针对你当前代码中分隔线无法在两个步骤间稳定居中的问题，以下是更优的实现方案：

问题根源 #

原有结构将分隔线嵌套在单个step元素内，结合justify-content: space-between的容器布局，容易导致分隔线位置随步骤内容宽度变化而偏移；同时冗余的transform和Sass变量margin设置也增加了对齐的复杂度。

优化后的代码实现 #

HTML结构（Vue）

<div class="step-container">
  <div v-for="(step, index) in steps" :key="index" class="step-item">
    <div class="step-content">
      <div class="step-icon">
        <!-- 图标内容，例如 <svg> 或图标组件 -->
      </div>
      <h3 class="step-title">{{ step.title }}</h3>
      <p class="step-desc">{{ step.description }}</p>
    </div>
    <!-- 仅在非最后一个步骤后显示分隔线 -->
    <div v-if="index < steps.length - 1" class="step-divider"></div>
  </div>
</div>

CSS样式

/* 外层容器：整体垂直居中，步骤项均匀分布 */
.step-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

/* 单个步骤项：内容与分隔线垂直对齐 */
.step-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1; /* 让所有步骤项均分容器宽度，可根据需求移除 */
}

/* 步骤内容区：垂直布局，居中对齐 */
.step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

/* 图标容器：固定尺寸确保对齐基准一致 */
.step-icon {
  width: 48px;
  height: 48px;
  background-color: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-title {
  margin: 0.5rem 0;
  font-size: 1rem;
  font-weight: 500;
}

.step-desc {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}

/* 分隔线：简洁的样式，依赖父元素垂直居中 */
.step-divider {
  width: 3rem;
  height: 2px;
  background-color: #d9d9d9;
  border-radius: 0.2rem;
}

核心优化点 #

1. 垂直对齐保障：通过容器和步骤项的align-items: center，让分隔线自动与图标中间位置对齐，无需手动计算偏移
2. 均匀布局控制：flex:1让每个步骤项均分宽度，确保分隔线始终处于两个步骤的中间位置
3. 简化间距管理：用gap替代复杂的margin设置，间距更直观可控
4. 固定图标尺寸：避免因图标大小差异破坏整体对齐效果

如果不需要步骤项均分宽度，可移除.step-item的flex:1，并给.step-container添加justify-content: space-around即可。

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