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

如何正确实现文本在块级元素中的水平与垂直居中？

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 是一个常被误解的属性。它并不控制元素在其父容器中的垂直对齐方式，而是用于调整行内级元素（如、、）在当前行框（line box）内的基线对齐位置。因此，当你将其应用在 div.error-message（一个默认为 display: block 的块级元素）上时，该声明完全被忽略——这也是为什么你的文本始终未垂直居中。

要可靠地实现文本在固定尺寸容器中的水平 + 垂直居中，现代标准推荐使用 Flexbox。只需对 .error-message 类添加三行关键样式：

.error-message {
  animation: fadeOut 2s forwards;
  animation-delay: 1s;
  color: #000000;
  font-size: 40px;
  padding: 40px;
  background: red;
  text-align: center; /* 水平居中（对 inline 内容有效）*/
  position: absolute;
  left: 0;
  top: 100px;
  width: 100%;
  height: 30px;

  /* ✅ 正确的垂直+水平居中方案 */
  display: flex;
  align-items: center;    /* 垂直居中（主轴为 Y 轴）*/
  justify-content: center; /* 水平居中（主轴为 X 轴）*/
}

⚠️ 注意事项：

AI脑图

AI脑图是一款可在线生成思维导图、流程图和信息图的 AI 结构化内容工具。

下载

align-items: center 作用于 Flex 容器的交叉轴（默认为 Y 轴），确保子元素在高度方向居中；
justify-content: center 作用于主轴（默认为 X 轴），确保子元素在宽度方向居中；
若容器内含多个子元素（如多个
），它们将作为一个整体被居中；如需内部文字进一步微调，可额外设置 margin 或 line-height（但非必需）；
无需再依赖 vertical-align 或 hack 式技巧（如 line-height == height），Flexbox 兼容所有现代浏览器（包括 IE11+，需加 -ms- 前缀）。

✅ 总结：告别 vertical-align 的误用，拥抱语义清晰、行为可预测的 Flexbox 居中方案——它简洁、健壮，且是目前 Web 开发中实现中心对齐的事实标准。