伪元素居中偏移的根本原因是父容器未约束基线对齐方式，尤其在flex布局下需显式设置align-items: center；同时必须确保父元素position: relative、伪元素有明确宽高，并优先使用inset: 0 + margin: auto替代translate(-50%,-50%)。
伪元素居中为什么总偏一点点？
伪元素（::before / ::after）本身不占文档流，但它的定位依赖父元素的布局上下文。常见现象是：明明写了 left: 50% + transform: translate(-50%, -50%)，可圆点或图标还是视觉上“没正中”——尤其在小尺寸（如 13px、15px）时更明显。
根本原因不是 transform 写错了，而是父容器没约束基线对齐方式。当父元素是 display: flex 且未设 align-items，子项（含伪元素所在标签）默认按 baseline 对齐，像素级渲染差异会被放大。
- 检查父容器是否设置了
align-items: center（Flex 布局下必须显式声明） - 确认伪元素的
position是absolute，且父容器有position: relative - 避免给伪元素设
top: 0或bottom: 0等固定偏移，会覆盖 transform 居中逻辑
text-align + vertical-align + 伪元素怎么配才稳？
这是兼容老浏览器（IE9+）的经典方案，靠 ::after 创建一个撑满高度的行内块，再用 vertical-align: middle 对齐目标元素。容易出错的地方在于“谁对齐谁”。
- 父容器必须设
text-align: center（水平居中）和font-size: 0（消除行内块间空格间隙） -
::after要设display: inline-block、height: 100%、vertical-align: middle - 目标元素（如
p或自定义按钮）也得是display: inline-block且vertical-align: middle - 如果父容器高度为
fit-content或未显式设高，height: 100%会失效——此时需补min-height或固定高度
flex 容器里伪元素居中要不要动它？
不需要。伪元素是依附于某个 HTML 元素的视觉层，它本身不是 flex 子项。真正要调的是那个承载伪元素的 HTML 元素（比如 label 或 span）在 flex 流中的位置。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 只要父 flex 容器有
justify-content: center和align-items: center，该 HTML 元素就会被整体居中 - 伪元素内部的居中（比如画个圆点）只需专注自身：设
width/height、border-radius: 50%、position: absolute、inset: 0+margin: auto即可 - 别在伪元素上写
left: 50%+top: 50%——inset: 0+margin: auto更简洁且不依赖尺寸计算
为什么 translate(-50%, -50%) 有时失灵？
这个组合只在“元素已通过 left/top 定位到中心点”时才有效。如果父容器没设 position: relative，left: 50% 会相对于视口计算；如果元素本身没宽高，translate 的百分比基准就不可靠。
- 必须确保父容器有
position: relative - 伪元素要有明确的
width和height（哪怕只是4px） - 现代写法推荐用
inset: 0替代top/left/bottom/right: 0，再配合margin: auto，语义更清晰且兼容性更好（Chrome 88+、Firefox 66+、Safari 14.5+） - IE11 及以下不支持
inset，需回退到top: 0; right: 0; bottom: 0; left: 0;
真正卡住人的往往不是代码写法，而是没想清楚：居中对象是谁？它的父级布局模式是什么？伪元素只是“画上去的”，它不决定位置，只响应位置。
