移动端时间轴垂直布局对齐失效主因是伪元素定位依赖固定值或父容器高度塌陷；应改用ol容器relative定位、min-height保障，伪元素仅负责圆点，竖线由ol::after绝对定位贯穿，避免单item内定位及50%横向偏移。
移动端时间轴垂直布局的对齐失效，90% 是因为伪元素定位依赖了固定值或未处理父容器高度塌陷。 直接用 left: 50% 或 top: 20px 画线，在 iOS Safari 或 Android Chrome 下极易偏移、断开、错位——这不是 CSS 写错了，是定位上下文没立住。
为什么 ::before 和 ::after 在小屏上总“飘”？
伪元素本身没有尺寸，它的定位完全依赖父元素的 position: relative 和计算上下文。常见错误包括：
- 给每个
.timeline-item的::before设top: 20px—— 小屏字体缩放、行高变化后，20px 不再对应视觉中心 - 主竖线用
.timeline-item::after而非ol::after—— 每个项单独画线，一旦某项高度为 0（比如空内容），那截线就消失，整条线断裂 - 没设
min-height或height，父容器实际渲染高度为 0，top: 50%+transform: translateY(-50%)失效
怎样让圆点和竖线在所有屏幕都稳在中轴线上？
核心是把「定位锚点」从单个项上移走，交给语义容器统一控制：
- 用
ol作为主容器，加position: relative和min-height: 100dvh（iOS Safari 16.4+ / Chrome 105+ 支持）；老版本 fallback 用 JS 注入--vh -
ol::after画贯穿竖线：content: ""+position: absolute+top: 0; bottom: 0; left: 1.5rem; width: 2px - 每个
.timeline-item只负责圆点：::before { content: ""; position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: #007bff; } - 避免用
50%做横向定位，改用固定偏移（如left: 1.4rem），这样不随字体缩放抖动
小屏下时间点与内容左右错位怎么修？
不是 flex 排列的问题，而是语义结构被破坏导致的对齐逻辑混乱：
立即学习“前端免费学习笔记（深入）”；
- 别用
.row .col-6强分左右 —— 它会让时间点和内容在小屏上变成两列并排，但内容高度不一致时，圆点就悬空 - 正确结构用
<ol><li><time>2024</time><div class="timeline-content">…</div></li></ol>，小屏时.timeline-content自然堆叠在<time>下方 - 移动端对齐靠
flex-direction: column+align-items: flex-start，而不是text-align: center—— 后者只影响文本水平位置，对整体块无效 - 如果必须左右交错（如奇左偶右），用
:nth-child(odd)控制margin-left，而非改变 flex 主轴方向
真正难的不是画线，是让每个时间点的「视觉重心」在任意设备上都落在同一根逻辑中轴上。这要求你放弃像素级微调思维，转而用容器约束 + 固定偏移 + 动态高度保障来建立稳定定位基线。
