伪元素垂直居中推荐用flex布局：宿主元素设display: flex和align-items: center，伪元素自动参与居中；单行文本可配合line-height与height相等及vertical-align: middle；绝对定位+transform translateY(-50%)为备选方案。
伪元素 ::before 和 ::after 本身是行内元素，直接设置 vertical-align: middle 或仅靠 line-height 往往无效，尤其当内容是多行文本、图标或需要精确控制时。真正可靠的方式是结合容器的布局上下文来实现垂直居中——重点不是“给伪元素设 line-height”，而是“让伪元素所在的布局环境支持居中”。
用 flex 布局让父容器支持 align-items
最推荐的做法：把伪元素的宿主元素（即写 ::before/::after 的那个元素）设为 display: flex，再用 align-items: center 居中其子内容（包括伪元素）。
- 伪元素默认会成为 flex 容器的子项，和普通子元素一样参与 flex 布局
- 需注意：若伪元素是纯装饰（如小圆点、分隔符），建议同时加
content: ""和显式尺寸（如width/height），避免塌陷 - 示例：
.icon-text {
display: flex;
align-items: center;
gap: 8px; /* 可选：控制伪元素与文字间距 */
}
.icon-text::before {
content: "★";
font-size: 16px;
width: 16px;
height: 16px;
/* 不需要 line-height，flex 已处理垂直居中 */
}line-height 仅适用于单行纯文本伪元素
如果伪元素只包含一行无换行的字符（如一个符号、单个字母），且宿主元素是行内或行内块，可尝试 line-height = 宿主元素高度 配合 vertical-align: middle。
- 必须确保宿主元素有明确的
height，且line-height与之相等 - 伪元素需设为
display: inline-block才能响应vertical-align - 不适用于图片、多行内容或动态高度场景
- 示例：
.badge {
height: 24px;
line-height: 24px; /* 关键：与 height 一致 */
}
.badge::before {
content: "●";
display: inline-block;
vertical-align: middle;
font-size: 12px;
}避免常见陷阱
-
不要给伪元素本身设 flex：
::before { display: flex }没有意义，它没有子元素（除非你用content插入 HTML，但不推荐） -
伪元素默认不可见：务必写
content: ""或content: "xxx"，否则即使样式写了也不会渲染 -
margin/padding 影响居中判断：flex 居中时，伪元素自身的 padding/margin 会参与计算，必要时用
box-sizing: border-box -
字体基线干扰：纯图标类伪元素（如 Font Awesome）容易因字体 baseline 偏移，此时
vertical-align: -0.125em或改用 flex 更稳妥
替代方案：transform translateY(-50%)
当无法修改父容器 display 类型时，可用绝对定位 + transform：
立即学习“前端免费学习笔记（深入）”；
- 给宿主元素设
position: relative - 伪元素设
position: absolute、top: 50%、transform: translateY(-50%) - 适合图标、徽章等尺寸固定的装饰性内容
- 注意：需手动控制左右位置（如
left: 0或right: 0），不如 flex 灵活
