justify-content: center对步骤条无效，因其仅控制步骤项整体水平位置，而圆点、文字、连线三者基线不统一且伪元素默认inline导致vertical-align失效。
步骤指示器在Flex中居中失败，不是因为没写justify-content: center，而是圆点、文字、连线三者没统一基线，伪元素又默认 inline 导致vertical-align失效。
为什么justify-content: center对步骤条没用？
它只控制所有步骤项整体在主轴（水平）上的位置，但每个步骤项内部的圆点和文字若没垂直居中，视觉上依然歪斜。更关键的是：连接线常靠::after画，而伪元素默认是 inline 盒子，在 flex 容器里不响应vertical-align，哪怕写了vertical-align: middle也白搭。
常见错误现象：
- 圆点比文字高半截，或文字吊在圆点下方
- 连接线只画出一半，或起点偏上/偏下
- 响应式缩放后，对齐彻底崩溃
每个步骤项必须是display: flex容器
不能只靠父容器 flex 居中，每个.step自身也要成为 flex 容器，才能精细控制内部对齐。
- 给
.step加display: flex+flex-direction: column+align-items: center，让圆点和文字都严格居中 - 圆点用
width/height/border-radius实现，别依赖::before编号（易错位） - 文字用
margin-top: 8px等固定间距，避免行高波动影响对齐 - 若需支持多行文字，用
text-align: center+line-height或flex: 1撑开再居中
连接线必须用容器级::before一次性绘制
放弃“每个.step::after画一段线”的思路——它无法保证起点终点像素对齐，且兄弟选择器在动态增删时不可靠。
- 给步骤容器（如
.steps）设position: relative - 用
.steps::before画整条基线：content: ""+position: absolute+top: 50%+transform: translateY(-50%)+height: 2px+width: 100% - 已完成步骤用
.step.active ~ .step::before覆盖颜色，或更稳妥地用 JS 切换.steps--completed类来控制渐变色段 - 别用
left/right硬定位连接线，会随字体渲染差异漂移
flex-basis要和真实子项完全一致
如果步骤项宽度靠flex-basis: 20%分配，那伪元素连线的参照系也得基于这个值；否则基线会偏移，尤其在 Safari 或旧版 Chrome 中。
- 检查
.step是否设置了flex: 0 1 auto或flex: 1，这会覆盖flex-basis导致计算失准 - 用
flex: 0 0 20%锁定基础尺寸，再靠margin或padding微调间距 - 边框、内边距必须计入
box-sizing: border-box，否则flex-basis实际可用宽度缩水 - 移动端小屏下，建议用
@media重设flex-basis和圆点尺寸，别只缩font-size
最易被忽略的是：圆点和文字的基线（baseline）不是同一物理线，哪怕都设了align-items: center，若圆点用inline-block或img，仍会因默认vertical-align: baseline错位。务必统一用display: flex内部对齐，绕过 baseline 计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
