(css)步骤条el-steps区分等待、进行中、完成三种状态的图片且居中

在CSS中，要使步进条中的图标与其它状态（如等待、进行中和完成）相对应并居中，可以使用CSS伪元素来为不同的状态设置背景图像，并使用flex布局使图标居中。以下是一个简单的例子：

HTML:

<el-steps>
  <el-step status="wait">...</el-step>
  <el-step status="process">...</el-step>
  <el-step status="finish">...</el-step>
</el-steps>

CSS:

.el-steps {
  display: flex;
  justify-content: center;
}
 
.el-step {
  position: relative;
}
 
.el-step::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
 
.el-step[status="wait"]::before {
  background-image: url('path-to-wait-image.png');
}
 
.el-step[status="process"]::before {
  background-image: url('path-to-process-image.png');
}
 
.el-step[status="finish"]::before {
  background-image: url('path-to-finish-image.png');
}

请确保替换path-to-wait-image.png、path-to-process-image.png和path-to-finish-image.png为实际图片路径。这段代码假设el-steps和el-step是自定义的元素，实际使用时需要根据实际的元素或类名进行调整。