flex容器自身具备原生垂直居中能力，align-items:center已足够；::after会作为匿名flex项干扰布局、破坏对齐逻辑，属画蛇添足。
flex 项目里加 ::after 做垂直居中，基本是画蛇添足——它不解决任何问题，反而可能破坏布局。
Flex 容器自身已具备原生、可靠的垂直居中能力，强行混用伪元素会引入不必要的复杂度和兼容性风险。
为什么 flex + ::after 不该一起用？
根本原因在于逻辑冲突：
-
align-items: center是针对 flex 项（flex items）的对齐控制，作用于直接子元素 -
::after生成的是一个额外的匿名 flex 项，它会参与 flex 排布，占用空间、影响justify-content和align-items的计算 - 若父容器设了
height，::after的height: 100%在 flex 上无意义（flex 项高度由容器或自身决定，不是靠百分比继承） - 一旦子元素是多行、有
flex-wrap: wrap或设置了flex-grow，伪元素会干扰换行和伸缩行为
align-items: center 就够了，别绕路
真正要做的，只是确保：
- 父容器声明
display: flex - 设置
align-items: center（垂直）和justify-content: center（水平） - 子元素无需额外
display或vertical-align—— 它们已经是 flex 项
示例：
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px; /* 必须有明确高度，否则 align-items 无参照 */
}
此时无论子元素是 <div>、<code><img> 还是文字，都会自然居中。
哪些场景容易误用伪元素？
常见误判点：
- 看到老教程里“
::before + inline-block”方案，直接套到 flex 容器上 —— 那套方案只适用于display: block或inline-block父容器 - 试图用
::after“撑高” flex 容器 —— flex 容器高度应由自身height或内容决定，不是靠伪元素占位 - 在
flex-direction: column下加::after想“辅助对齐” —— 此时justify-content: center已完全覆盖需求
真正需要伪元素介入的，是那些不能改用 flex 的遗留布局（比如 IE9 以下必须兼容的场景），或者极特殊的装饰性对齐需求。现代开发中，只要能用 flex，就不要给它加 ::after。
