伪元素::after能当垂直居中“辅助线”，因其作为行内级元素可设display:inline-block、height:100%和vertical-align:middle，与目标元素同属一行内流并共享基线对齐；但仅在父容器为块级流（非flex/grid）时生效。
伪元素 ::after 为什么能当垂直居中的“辅助线”？
因为 ::after 本身是行内级元素，且默认不占据空间（content: "" 时高度塌陷），但它可以被赋予尺寸、display 类型和对齐行为，从而在父容器的行内格式化上下文中“撑起”一条视觉中线——这正是 vertical-align: middle 起作用的前提。
它不是直接“居中目标元素”，而是和目标元素一起成为同一行内流中的兄弟项，靠共同对齐到中线来实现视觉居中。所以关键不是给 ::after 加 margin 或 top，而是让它参与对齐计算。
- 必须设
content: ""（哪怕空字符串，否则伪元素不渲染） - 必须设
display: inline-block（纯inline无法设宽高，block会换行） - 必须设
height: 100%或固定高度（否则没有参考基准，vertical-align失效） - 父容器需有明确高度，且不能是
position: absolute或flex布局（否则行内格式化上下文被破坏）
用 ::after 实现单行文本垂直居中：text-align + inline-block 组合
这是最轻量、兼容性最好的方案，适用于按钮、卡片标题等固定高度容器内的单行文字。
核心逻辑：父容器设 text-align: center 水平居中，再靠 ::after 和文字同为 inline-block、同设 vertical-align: middle，让它们共享基线。
div {
height: 60px;
line-height: 60px; /* 可选，仅用于纯文字；若有图标或复杂内容请勿依赖 */
text-align: center;
}
div::after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
-
line-height在这里只是辅助手段，真正起作用的是vertical-align: middle和::after的高度 - 如果文字里混有
img或span，它们也得统一设vertical-align: middle - IE8+ 支持良好，但注意
height: 100%在某些嵌套场景下需父元素有显式高度
多行内容或需要精确控制时，为什么 ::after + flex 更可靠？
当内容可能换行、或需同时水平+垂直居中、或父容器本身已是 flex 布局时，强行用 inline-block + vertical-align 会失效——因为 flex 容器不走行内格式化上下文。
此时应把 ::after 当作一个 flex 子项来用，而不是对齐辅助。常见做法是用 ::before 占位，或用 ::after 配合 flex: 1 平衡空间。
.container {
display: flex;
align-items: center; /* 垂直居中所有子项，包括伪元素 */
justify-content: center; /* 水平居中 */
height: 200px;
}
.container::after {
content: "";
width: 0; /* 不占视觉空间 */
flex: 1; /* 但参与 flex 分配，可用来平衡 */
}
- 如果只想要内容居中，不需要
::after显式存在，直接用align-items: center即可 -
::after真正发挥作用是在需要“占位”或“分隔”的场景，比如导航栏末尾加竖线、模态框底部加阴影层 - 不要给
::after设margin或transform来“微调居中”——这说明布局模型已失控，应回头检查容器 display 类型
容易踩的坑：vertical-align 生效的前提被悄悄破坏了
最常见的失效不是代码写错，而是上下文被覆盖：只要父容器用了 float、position: absolute、display: flex 或 display: grid，vertical-align 就完全不生效——它只在行内格式化上下文中起作用。
- 检查 computed style 中父元素的
display是否为block或inline-block，且未被 flex/grid 覆盖 - 确认伪元素和目标元素是否在**同一行内流中**：如果中间插了
br、div或其他块级元素，它们就不再“同排” -
vertical-align: middle对齐的是“字母x高度中线”，不是容器中心线；若内容含下划线、descender 字符（如 g、y），视觉上仍可能略偏下 - 用
transform: translateY(-50%)补救虽快，但依赖绝对定位，会脱离文档流，慎用于响应式场景
真正稳定的居中，从来不是靠一个伪元素“修修补补”，而是先确定容器的布局模型，再选择匹配的居中策略。::after 是工具，不是万能解药；它最擅长的，是当父容器是传统块级流时，默默拉齐那一根看不见的中线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
