如何正确实现文本在容器中的水平与垂直居中？-html教程-PHP中文网

如何正确实现文本在容器中的水平与垂直居中？

vertical-align: middle 对块级元素无效，需改用 Flexbox 的 align-items 和 justify-content 实现真正的垂直+水平居中。

`vertical-align: middle` 对块级元素无效，需改用 flexbox 的 `align-items` 和 `justify-content` 实现真正的垂直+水平居中。

在 CSS 中，vertical-align 是一个常被误解的属性。它仅对 inline、inline-block、table-cell 等特定显示类型的元素生效，用于控制它们在其行框（line box）或父单元格内的基线对齐方式；而 .error-message 是一个 position: absolute 的块级容器（默认 display: block），此时 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; /* 水平居中（对 flex 内部文本非必需，但保留无害） */
  position: absolute;
  left: 0;
  top: 100px;
  width: 100%;
  height: 30px;

  /* ✅ 关键：启用 Flex 布局并居中内容 */
  display: flex;
  align-items: center;    /* 垂直居中（主轴为垂直方向） */
  justify-content: center; /* 水平居中（主轴为水平方向） */
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

同时，HTML 结构保持简洁即可：

吐司AI高清

吐司AI高清是一款AI图片处理工具，Toast AI 推出的图像超分辨率/修复工具。

下载

<div class="error-message">
  <p>Some message text</p>
</div>

⚠️ 注意事项：

align-items: center 依赖于容器有明确高度（如本例中 height: 30px），否则可能因高度塌陷导致视觉上未居中；
若容器内含多行文本或复杂子元素，Flexbox 仍能稳健处理，无需额外 hack；
避免混用 vertical-align 与 display: block —— 这是常见误区，建议彻底移除该声明；
如需支持 IE10+，Flexbox 兼容性良好；若需兼容更老版本，可考虑 transform: translate(-50%, -50%) 配合 top: 50%; left: 50%，但 Flexbox 更直观可靠。

总结：居中不是靠“猜属性”，而是理解布局模型。Flexbox 是目前最可靠、最易维护的居中解决方案——一行 display: flex，两行居中声明，即刻生效。