时间线节点必须通过 position: absolute、left: 50% 和 transform: translateX(-50%) 实现中心锚点对齐主线中轴，父容器需设 position: relative；Flex 布局下应使节点成为直系子项并用 justify-content: center 或 align-items: center；响应式时需在媒体查询中重置 transform 并注意 border/box-shadow 对渲染尺寸的影响。
时间线节点（如圆点、图标、数字标记）必须相对于垂直主线居中，否则视觉失衡。核心不是“让节点居中”，而是“让节点的中心锚点对齐主线中轴”。
用 transform: translateX(-50%) 对齐主线中点
绝大多数垂直时间线用伪元素或绝对定位画一条贯穿的垂直线（::before），节点默认左对齐。若直接设 left: 50%，节点左边缘会落在主线位置，看起来偏右。
- 节点需同时设
position: absolute、left: 50%和transform: translateX(-50%) -
translateX(-50%)把节点自身宽度的一半拉回，使其真正以中心点贴合主线 - 父容器（每个时间项）必须有
position: relative，否则left: 50%会相对视口计算 - 不要只靠
margin: 0 auto—— 它在绝对定位下失效，且不解决锚点偏移问题
Flex 布局下避免 justify-content: center 失效
如果时间线项用 display: flex 实现左右内容分布（如左侧时间、右侧描述），节点常被塞进 flex 容器里。这时 justify-content: center 对单个节点无效，因为节点不是 flex 项目，而是 flex 项目里的子元素。
- 把节点单独提一层 DOM，让它成为 flex 容器的直系子项，再用
justify-content: center - 或给节点父容器（比如一个
<div class="timeline-node-wrapper">）设display: flex+justify-content: center - 注意：flex 容器若设了
flex-direction: column，则需用align-items: center而非justify-content
响应式断点时重置 transform 偏移量
移动端常把时间线改为单列、节点靠左/靠右排列，此时 translateX(-50%) 会导致节点错位——它仍按原宽度计算偏移，但节点可能已缩放或换行。
立即学习“前端免费学习笔记（深入）”；
- 在
@media中覆盖transform，例如设为transform: none或translateX(0) - 若节点用了
em或rem单位，确保根字体大小变化时translateX(-50%)仍准确（它基于元素自身宽高，不受 font-size 影响，这点安全） - 避免在媒体查询里重复写
left: 50%—— 移动端通常改用margin-left: auto; margin-right: auto配合定宽
最容易被忽略的是：节点的 border、box-shadow 或 outline 会扩大实际渲染尺寸，导致 translateX(-50%) 计算出的中心点偏移。调试时临时加 outline: 1px solid red 看真实边界，比依赖设计稿更可靠。
