为什么绝对定位容器中的文本无法垂直居中？

vertical-align: middle 对块级元素无效，它仅适用于行内或表格单元格等特定上下文；要实现绝对定位容器内的垂直+水平居中，应使用 Flexbox 布局（display: flex; align-items: center; justify-content: center）。

`vertical-align: middle` 对块级元素无效，它仅适用于行内或表格单元格等特定上下文；要实现绝对定位容器内的垂直+水平居中，应使用 flexbox 布局（`display: flex; align-items: center; justify-content: center`）。

在 CSS 中，vertical-align 是一个常被误解的属性。它并非用于控制块级元素在其父容器中的垂直对齐，而是专为行内级（inline）、行内块级（inline-block）元素或表格单元格（table-cell） 设计，用于调整它们相对于当前行框（line box）或父表格单元格的基线位置。因此，在您定义的 .error-message 类中——该元素是 position: absolute 的块级元素，且未设置 display: inline-block 或 display: table-cell——vertical-align: middle 完全不起作用，会被浏览器忽略。

要真正实现文本在绝对定位容器中的垂直 + 水平居中，推荐使用现代、语义清晰且兼容性良好的 Flexbox 方案：

.error-message {  animation: fadeOut 2s forwards;  animation-delay: 1s;  color: #000000;  font-size: 40px;  padding: 40px;  background: red;  text-align: center; /* 水平居中仍有效（针对内部行内内容） */  position: absolute;  left: 0;  top: 100px;  width: 100%;  height: 30px;  /* ✅ 关键修复：启用 Flex 布局实现双轴居中 */  display: flex;  align-items: center;    /* 垂直居中（主轴为 column 时等效于 cross-axis 居中） */  justify-content: center; /* 水平居中（主轴为 row 时默认方向） */}

? 注意：align-items: center 和 justify-content: center 在 flex-direction: row（默认值）下分别控制交叉轴（垂直） 和主轴（水平） 的居中，完美匹配您的需求。

此外，还需留意两点潜在问题：

• 当前 height: 30px 与 font-size: 40px + padding: 40px 冲突，会导致内容溢出。建议根据实际视觉需求调整尺寸，例如移除 padding 或增大 height；
• 若需兼容非常旧的浏览器（如 IE9 及以下），可考虑 transform: translate(-50%, -50%) 配合 top: 50%; left: 50% 的传统方案，但 Flexbox 在现代项目中是更简洁可靠的首选。

总结：摒弃对 vertical-align 的误用，拥抱 Flexbox——它专为这类布局场景而生，代码更直观、行为更可预测，是实现精准居中的标准实践。