伪元素::after能作为垂直居中辅助线，因其是行内级元素，设display:inline-block、height:100%和vertical-align:middle后，与目标元素同属一行内流并共享基线对齐，从而实现视觉居中。
伪元素本身不提供“垂直居中线”这种独立视觉元素，但常被误称为“居中线”的，其实是用 ::after 或 ::before 伪造一个占满高度的辅助块，配合 vertical-align: middle 实现内容垂直居中——它不是画一条线，而是构造一个对齐基准。
为什么用 ::after 而不是 ::before？
两者功能等价，但 ::after 更常用，因为 DOM 渲染顺序靠后，避免干扰原有子元素顺序；若父容器已有 ::before 用于清除浮动（如 clear: both），再加一个 ::before 可能引发层叠或样式覆盖问题。
-
::after默认插入在所有子元素末尾，不影响原始 HTML 结构语义 - 若父容器已用
::before做 clearfix（例如.parent::before { content: ""; display: table; clear: both; }），重复用::before会多出一个无意义节点，增加调试复杂度 - 浏览器对
::after的解析一致性略高，尤其在旧版 Safari 中更稳定
vertical-align: middle 对哪些元素生效？
这个属性只对 display: inline 或 display: inline-block 元素起作用。所以必须确保：父容器设 font-size: 0（防 whitespace 占位）或子元素设 display: inline-block，否则 vertical-align 会被忽略。
- 文字、
<img>、<span></span>默认是 inline，可直接设vertical-align: middle <div> 等块级元素必须显式加 <code>display: inline-block才能响应vertical-align- 父容器若有换行符或空格，会生成匿名文本节点，占据基线位置——建议把 HTML 写成紧凑格式，或设
font-size: 0后在子元素里重设字体大小 - 父容器必须有显式高度：如
height: 200px、min-height: 100vh，或被 flex/grid 容器约束出高度 - 若父容器是
position: relative但没设高，height: 100%会退化为 0 - 嵌套多层时，中间任意一层缺失高度声明，都会导致
height: 100%断链——建议用 devtools 检查 computed height 是否为预期值 - flex 容器里
::after默认是 block，除非显式设display: inline-block，但依然不参与vertical-align对齐 - 想同时用伪元素和 flex，只能把伪元素放在 flex 容器的兄弟节点，或改用
place-items: center这类 grid 方案 - 最稳妥做法：选一种方案到底。伪元素法适合老项目兼容 IE8+；flex 是现代首选，别强行嫁接
height: 100% 为什么经常失效？
伪元素的 height: 100% 不是自动继承父高，而是依赖父容器有**明确的高度计算上下文**。如果父容器高度由内容撑开（比如没设 height 或 min-height），height: 100% 就算不出来。
和 flex 居中混用会怎样？
完全冲突。一旦父容器设了 display: flex，内部就进入 flex formatting context，inline-block + vertical-align 失效，伪元素会变成一个普通 flex item，vertical-align 被无视。
真正容易被忽略的是：伪元素方案本质是 hack，它依赖行内格式化上下文的基线对齐机制，而现代布局（flex/grid）早已绕过这套逻辑。如果你的父容器高度动态、内容可能换行、或未来要接入组件库，优先用 flex 或 grid——伪元素只适合静态、简单、需兼容老浏览器的场景。
