absolute定位数字偏移是因为其默认以左上角为原点，而文字有行高和字体下沉；应配合transform: translate(-50%, -50%)、line-height: 1及flex布局实现精准居中。
absolute定位步骤点时，为什么数字总偏移连线中心？
因为absolute元素默认以top:0; left:0为起点，而数字本身有行高、字体下沉和内联盒模型特性，直接居中会错位。常见表现是数字“浮”在连线之上或压线一半。
实操建议：
- 给步骤点容器（如
<div class="step-dot">）设<code>position: absolute，同时加transform: translate(-50%, -50%)，用自身宽高中心对齐坐标点 - 确保父容器有
position: relative（否则absolute会逐级向上找，可能脱离步骤条上下文） - 数字文字用
line-height: 1+font-size精确控制高度，避免因默认line-height导致垂直偏移 - 别依赖
vertical-align——它对absolute子元素无效 - 把连线抽成独立的
<div class="step-line">，宽度由JS计算或CSS变量传入，避免用<code>width: 100%被内联块干扰 - 伪元素方案示例：
.step-line::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #ccc; transform: translateY(-50%); } - 若需支持IE11，改用真实元素+
height: 2px，但注意父容器要清除浮动或设overflow: hidden防塌陷 - 步骤项整体用
display: flex; align-items: center，数字容器设flex-shrink: 0防止被压缩 - 数字外层加
min-width（如min-width: 2em），保证单双位数都占相同水平空间 - 文字部分用
flex: 1; margin-left: 0.75em，留出固定间隙，比用text-indent或padding-left更稳定 - 避免用
float——它会让后续元素布局不可预测，尤其在响应式折叠时容易换行错位 - 步骤条容器用
display: grid或flex做主布局，仅步骤点用absolute，连线用position: absolute但绑定到同一父级，避免层级混乱 - 关键参数用CSS自定义属性（如
--step-gap: 24px），配合calc()动态算位置：left: calc(var(--step-gap) * 1) - 媒体查询里重置
transform和font-size，别只调width——否则数字缩放后translate(-50%, -50%)仍按旧尺寸偏移
连线用border还是伪元素？哪种更稳？
用::before或::after伪元素画线更可控。直接给步骤容器加border-bottom看似简单，但一旦步骤点需要悬停缩放、添加阴影或响应式断点，border会跟着变形或断裂。
实操建议：
数字标号怎么动态对齐到不同长度的文字描述上？
当步骤文字长度不一（比如“准备环境” vs “配置CI/CD流水线并验证部署结果”），靠左对齐会导致数字和文字基线错乱，视觉上像没对齐。
实操建议：
响应式下步骤条断成两行，连线消失或错位怎么办？
本质是绝对定位脱离文档流后，父容器高度塌陷，且left值未随屏幕缩放重算。常见错误是只用vw单位写死left，但没考虑容器padding或字体缩放影响。
实操建议：
最易被忽略的是：所有absolute元素的top/left必须基于同一个相对定位祖先，且该祖先不能是inline元素或未设height的空容器。否则在某些浏览器里，位置计算会回退到body，导致整条步骤条飘走。
