transform: translatex(-50%) 是圆点居中的关键，它将圆点左移自身宽度一半，使视觉中心对齐轴线；配合 top: 50%、left: 50% 和 translatey(-50%)，并确保父容器设 position: relative，才能实现精准几何居中。

为什么 transform: translateX(-50%) 是圆点居中的关键

圆点默认以左上角为定位原点，left: 50% 只是把它左边缘移到轴线位置，结果是右边缘贴线、整体右偏。真正让视觉中心对齐轴线的，是这句：transform: translateX(-50%)——它把圆点再向左推自身宽度的一半。漏掉它，哪怕 left 值调得再准，也会偏移 8px 左右。

position: absolute 圆点必须配合 top: 50% 和 transform: translateY(-50%)

仅水平居中不够，垂直也要对齐轴线中心。常见错误是只写 top: 50%，结果圆点顶部对齐了中线，整个圆向下悬垂一半。正确组合是：

• position: absolute
• top: 50%
• left: 50%
• transform: translate(-50%, -50%)

这个四件套确保圆点几何中心精准落在轴线交叉点上，不受宽高变化影响。

父容器没设 position: relative 会导致圆点“飘走”

所有 absolute 子元素都依赖最近的已定位祖先（即 position 值不为 static 的父级）。如果外层容器没加 position: relative，圆点会逐层向上找，最终相对于 body 定位——看起来就是乱飞、错位、响应式下完全失控。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

务必检查：时间轴最外层容器（如 .timeline）是否明确写了 position: relative，且该容器有可计算的高度来源（比如用 ::before 伪元素撑高，或设 min-height）。

用 border-left 做轴线时，圆点 left 值要和轴线位置一致

如果轴线是靠 border-left: 2px solid #333 实现的，那它的视觉中心在容器左边缘内侧 1px 处。此时圆点的 left 应设为 0 或 1px，再配合 transform: translateX(-50%) 居中。若误设 left: 50%，就会严重右偏。

更稳妥的做法是统一用伪元素画轴线：.timeline::before 设 left: 50% + transform: translateX(-50%)，这样圆点也用 left: 50%，逻辑对齐，不易出错。

圆点居中看着简单，但实际卡在三个地方：transform 缺一不可、父容器定位上下文缺失、轴线与圆点的参考基准不统一。改完记得在不同缩放比例下拖动滚动条看是否还稳——很多“居中”只在 100% 缩放下成立。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！