::after伪元素通过参与行内格式化上下文实现垂直居中，它与目标元素同为inline-block、同设vertical-align:middle，在父容器明确高度且为普通块级流时共享基线对齐；必须设content:""和display:inline-block，否则无法渲染或失去对齐基础。
::after 伪元素能实现垂直居中，但不是“直接居中目标”，而是靠参与行内格式化上下文的对齐计算——它和目标元素一起成为同一行内的兄弟项，共享 vertical-align: middle 的基线。
这个方案轻量、兼容 IE8+，但只适用于父容器为普通块级流（非 flex/grid/absolute）且高度明确的场景。一旦用 display: flex 或 position: absolute，伪元素就失去作用基础。
为什么 ::after 必须设 content: "" 和 display: inline-block
伪元素默认不渲染，content: "" 是强制它存在的最低要求；display: inline-block 才能让它拥有可设置的 height，同时不破坏行内流——纯 inline 无法设高宽，block 会换行，导致对齐失效。
vertical-align: middle 对齐的是什么？
它对齐的是“行内盒的中线”，不是父容器的中线。所以必须让伪元素和目标元素都设 display: inline-block + vertical-align: middle，二者才在同一条基线上“拉平”。常见错误是只给目标元素设 vertical-align，忘了伪元素也要设。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 父容器需有明确
height（比如height: 200px），否则height: 100%没参考值 - 父容器不能设
position: absolute或display: flex，否则行内格式化上下文被破坏 - 目标元素不能是块级（如
div默认）且未改display，否则不会和伪元素同行
实际写法：三步缺一不可
以一个固定高度的按钮为例：
.btn {
width: 120px;
height: 40px;
text-align: center; /* 水平居中 */
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.btn span {
display: inline-block;
vertical-align: middle;
}注意：span 是目标内容容器，不能用 p 或未改 display 的块级标签；::after 的 height: 100% 依赖父容器高度，若父容器高度由内容撑开（比如没设 height），则无效。
容易被忽略的兼容性细节
这个方案在 IE8+ 完全可用，但要注意：
-
font-size: 0在父容器上有时用来消除inline-block间的空白符间隙，但会影响子元素文字——得在目标元素里重设font-size - 如果目标元素是图片，
vertical-align: middle对图片本身生效，但图片默认带底部留白（baseline 对齐导致），此时加vertical-align: middle才真正对齐 -
::before和::after效果一致，选哪个取决于 HTML 结构语义，但不要两个都用，否则多出一个无意义的行内节点
真正起作用的从来不是伪元素本身，而是它和目标元素共同构成的“行内对齐组”——只要这个结构被破坏（比如父容器用了 flex），整个逻辑就垮了。
