伪元素装饰线垂直居中失效的典型表现是::before画的横线未在父容器中间，根本原因是未重置transform基准点；正确方案为top: 50%配合transform: translateY(-50%)，且父容器需设position: relative、伪元素必须声明content: ""。
伪元素装饰线垂直居中失效的典型表现
用 ::before 画一条横线，设 position: absolute 后发现它没在父容器中间——常见于导航菜单、标题下划线、卡片分隔线等场景。根本原因不是“没写对”，而是默认 top: 0 或未重置 transform 基准点。
绝对定位 + transform 的最小可行方案
核心就两步：先让伪元素顶部贴住父容器中点，再用 translateY(-50%) 自身回拉一半高度。不依赖父容器高度是否已知，也不需要 line-height 配合。
实操建议：
- 父容器必须设
position: relative（否则absolute会往上层找定位上下文） -
::before必须显式声明content: ""，否则不渲染 - 避免只写
top: 50%—— 这会让元素**上边缘**在中点，实际视觉偏下 - 推荐写法：
top: 50%; transform: translateY(-50%);
h2 {
position: relative;
}
h2::before {
content: "";
position: absolute;
left: 0; right: 0;
top: 50%;
height: 2px;
background: #333;
transform: translateY(-50%);
}
为什么不用 flex 或 grid 做这条线
因为伪元素本身不能设 display: flex，也不能作为 grid 子项参与布局。想用 flex 居中，得把装饰线改成真实 DOM 元素（比如 ），反而增加语义冗余和维护成本。伪元素的优势就是轻量、无结构侵入，absolute + transform 是它最自然的居中路径。
注意兼容性：transform 在 IE9+ 完全支持，但 IE8 及更早版本不支持——如果项目还需兼容 IE8，就得改用 margin-top: -1px（需预知线高）或 JS 动态计算。
容易被忽略的宽度与响应式陷阱
很多人写 left: 0; right: 0; 想撑满，结果在 padding 或 border 不为 0 的父容器里溢出。或者在移动端缩放时，2px 线变模糊。
关键细节：
- 若父容器有
padding，伪元素的left/right会相对于 padding box 计算，导致线超出内容区——此时应改用width: 100%; left: 0;并确保父容器box-sizing: border-box - 高清屏下
height: 1px可能被 subpixel 渲染抹掉，建议至少用height: 2px或配合backface-visibility: hidden强制清晰渲染 - 不要给伪元素设
vertical-align—— 它不生效
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
