核心思路是伪元素脱离文档流后用top: 0; bottom: 0拉满高度、left: 50%; transform: translatex(-50%)水平居中，父容器需设position: relative，避免height: 100%依赖未定义高度。
用 ::before 伪元素 + position: absolute 实现居中竖线
核心思路是让伪元素脱离文档流，再通过 top/bottom 和 transform 精确控制高度与位置。常见错误是直接写 height: 100%，但伪元素的百分比高度依赖父容器是否设置了明确高度——如果父容器是 min-height 或由内容撑开，100% 就会失效。
- 父容器必须设
position: relative，否则absolute会向上级定位上下文找 - 伪元素用
top: 0+bottom: 0拉满高度，比height: 100%更可靠 - 竖线居中靠
left: 50%+transform: translateX(-50%)，避免依赖父容器宽度计算 - 颜色/粗细统一用
border-left（或background），别混用border和box-shadow
.container {
position: relative;
padding: 0 20px;
}
.container::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
background: #d9d9d9;
}
响应式下竖线高度不随内容变化？检查 align-items 和 vertical-align
当竖线放在 display: flex 容器里时，如果子项高度不一致，top: 0; bottom: 0 仍能拉满，但若用了 align-items: flex-start 或 vertical-align: top，伪元素的定位基准可能偏移，导致竖线只覆盖部分区域。
- Flex 容器中，确保竖线所在元素本身没被
align-self调整过对齐方式 - 避免在伪元素上设
height或line-height，它们会覆盖top/bottom拉伸效果 - 小屏折叠时，竖线常需隐藏：用
@media (max-width: 768px) { .container::before { display: none; } }
border-start 在 Bootstrap 5 中为何比 border-left 更安全？
border-start 不是“更高级”，而是语义和 RTL 兼容性上的刚需。它在 LTR 页面渲染为 border-left，在阿拉伯语等 RTL 页面自动变为 border-right，且不会因方向切换导致布局错位。
- 必须配合
display: flex或display: grid的子项使用，否则无效 - 不能直接加在文本节点上，要包裹一层
<div> 或 <code><span></span> - 颜色优先用
border-start-secondary这类语义类，而非硬编码#dee2e6 - 调试时若不见效，先查父容器是否漏了
d-flex或grid类
<div class="d-flex"> <div class="pe-3">左</div> <div class="border-start border-secondary ps-3">右</div> </div>
伪元素竖线在高对比度模式下消失？别忽略 color-scheme 和系统偏好
Windows 高对比度模式或 macOS 的深色/浅色自动切换下，background 或 border 可能被系统强制重置为透明或默认色。这不是 bug，而是浏览器对可访问性的主动适配。
- 用
border-left: 1px solid CanvasText替代固定色值，让线条跟随系统文字色 - 避免用
box-shadow模拟竖线——高对比度模式下阴影会被剥离 - 测试时打开系统设置里的「高对比度」开关，而非仅靠浏览器模拟
- 如果产品必须强控颜色，需在
@media (forced-colors: active)里单独声明
height、不依赖未定义的父高、并避开 vertical-align 干扰，top: 0; bottom: 0 就是最稳的解法。
