伪元素用 position: absolute 居中必须设父容器 position: relative，否则会以 body 或视口为参考导致偏移；需配合 transform: translate(-50%, -50%) 且显式设置尺寸或 content；避免父元素 transform、overflow、filter 等干扰定位上下文。
伪元素用 position: absolute 居中必须设父容器 position: relative
伪元素（::before 或 ::after）本身不能脱离文档流，但一旦加了 position: absolute，它就只认“最近的已定位祖先”。如果父元素没设 position: relative，伪元素会往上找，最终以 body 或视口为参考——结果就是居中偏移，滚动时还飘。
常见错误是只写：
.box::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
却漏掉父元素声明：
-
.box { position: relative; }—— 必须显式加上，static（默认值）不算“已定位” - 若父元素本身是
display: flex或grid，仍需加position: relative，否则伪元素不以它为定位上下文 - 避免用
body直接当父容器——它的margin、padding或重置样式可能引入意外偏移
content 为空字符串时，伪元素默认不占空间，居中要靠尺寸或 transform
写 content: "" 的伪元素，初始宽高为 0，top: 50%; left: 50% 会把它锚点（左上角）钉在中心，但因为没尺寸，看不出效果。必须手动给尺寸，或靠 transform 触发渲染。
- 加尺寸：
width: 20px; height: 20px;，再配合transform: translate(-50%, -50%) - 不设宽高？可用
background+padding撑开，比如content: ""; padding: 8px; background: #000; - 纯图标场景常用
font-family: "icon-font"; content: "\e901";，此时字体大小即尺寸基准，transform百分比按字体盒计算 - 别依赖
margin: auto—— 伪元素不是常规子元素，margin: auto在绝对定位下仅对定宽高元素生效，且兼容性差
伪元素居中失效的三个隐蔽原因
即使写了 position: relative 和 transform，仍可能偏移。问题往往不在伪元素本身，而在上下文干扰。
- 父容器有
transform（如scale(0.95)）：多数情况不影响，但若用了transform-style: preserve-3d，可能创建新层叠上下文，导致定位参考系错乱 - 父容器设置了
overflow: hidden且伪元素超出范围：居中后被裁剪，看起来像“没动”，实际位置正确 - 伪元素被其他 CSS 覆盖：比如父元素有
filter: blur(1px)，会隐式创建新层叠上下文，改变 z-index 层级，导致视觉上“消失”或错位
用伪元素做加载动画时，居中必须和父容器高度解耦
比如在按钮内加一个旋转的 ::after 加载图标，按钮高度可能随文字变化。这时不能写死 top: 50%; margin-top: -8px 这类依赖像素值的方案。
- 可靠写法：
top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(30deg);—— 所有百分比基于自身尺寸，不关心父高 - 若同时有缩放动画（如
scale(1.2)），必须合并进同一个transform声明，否则后写的会覆盖前写的 - 注意：伪元素的
transform-origin默认是50% 50%（中心点），无需额外设置；改了会影响旋转/缩放中心
position: relative 的 wrapper、一行被忽略的 filter、甚至父元素的 line-height，都可能让伪元素的“居中”变成一场视觉幻觉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
