时间轴圆点偏右是因为未加transform: translateX(-50%)，该声明使圆点左移自身宽度一半，确保视觉中心对齐border-left；漏掉则右边缘贴线，整体右偏8px。
直接用 border-left + ::before 伪元素就能做出干净、可维护的时间轴，不需要 JS 或复杂 Grid —— 但必须给外层容器加 position: relative，否则圆点和竖线会飘。
为什么时间点圆点总偏右或贴边？
核心是没写 transform: translateX(-50%)。圆点默认以左边缘为原点，left: -12px 只是粗略预估位置；真正居中靠的是这句偏移自身宽度一半的操作。漏掉它，视觉上就是“圆点右边缘挨着竖线”，看起来整体向右偏了 8px。
-
.timeline-item::before必须同时有left: -12px（配合竖线间距）和transform: translateX(-50%) - 圆点尺寸改了，
left值也要同步调，比如从16px圆改成20px，left建议改为-14px - 别用
margin-left推圆点——它不脱离文档流，会影响后续内容排版
怎么让内容区不压住竖线和圆点？
用 margin-left，不是 padding-left。后者会让内边距参与盒模型计算，一旦内容里有 inline-block 或浮动元素，高度容易塌陷或换行错位。
- 推荐统一设
margin-left: 48px：预留 16px 圆点宽 + 4px 间隙 + 28px 竖线到内容距离 - 若某项需加图标或标签，单独加
margin-left: 64px，避免全局改写 - 绝对不要给
.timeline-item设固定height，内容长度不一时会截断
响应式下竖线断掉或错位怎么办？
根本原因是父容器没撑起可计算高度。伪元素 height: 100% 在父高塌陷时无处可依，尤其当子项用了 position: absolute 后，父容器更易高度归零。
立即学习“前端免费学习笔记（深入）”；
- 用
.timeline::before画竖线时，必须确保父容器有明确高度来源：要么设min-height: 300px，要么用另一个伪元素（如::after）加padding-top: 1px强制撑高 - 小屏建议切横线布局：
top: 50%+transform: translateY(-50%)+width: 100%+height: 2px - 媒体查询里只动
left、top、width，别重写position或transform规则，否则极易漏覆盖
最常被忽略的一点：所有伪元素（包括 ::before 画的圆点和竖线）都受祖先层叠上下文影响。如果页面同时有 position: sticky 导航栏，.timeline 必须显式加 position: relative 和 z-index: 1，否则圆点可能被遮挡或穿透。
