text-align: center仅使行内内容水平居中，不居中块级容器自身；align="center"和标签在HTML5中已废弃；失效常见原因包括父容器为flex、子元素脱离文档流、父宽为0或子元素为块级；垂直居中推荐用Flex布局。

直接给父容器加 text-align: center 就能解决绝大多数文字水平居中需求，但这个属性只控制内部行内内容（比如文字、span、图片）的对齐，不改变容器自身位置——别指望它让整个 div 飘到页面正中间。

为什么 align="center" 和 不能用

HTML 中的 align 属性（如

）和 标签在 HTML5 中已被正式废弃。现代浏览器虽可能仍渲染，但 W3C 不再支持，部分严格模式或新版本解析器会忽略，CI/CD 流水线里的 HTML 验证工具也会报错。实际项目里混用容易导致样式不可控，尤其在多人协作或组件复用时。

text-align: center 失效的常见原因

这个声明看似简单，但经常“没反应”，通常是因为：

• 父容器用了 display: flex —— 此时 text-align 完全失效，必须改用 justify-content: center
• 子元素设置了 float 或 position: absolute —— 脱离文档流后，text-align 失去作用对象
• 父容器宽度为 0 或未定义（比如空 div 无内容又没设 width/min-width）—— 没有可对齐的“行框”
• 子元素是块级且未包裹在行内上下文中（例如直接放一个
  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载
  在
  里，而

  自身是块级）—— text-align 仍生效，但只影响

  内部文字；若想让

  整体居中，得另想办法

  需要垂直居中？别硬套 line-height

  单行定高文本可用 line-height 等于容器高度来垂直居中，但这是个脆弱方案：

  • 一旦字体缩放、响应式字号变化或内容变成两行，line-height 就会撑开容器或截断文字
  • 它依赖绝对像素值，和 em/rem 单位配合时行为难预测
  • 真正可靠的垂直+水平居中，请用 Flex：给父容器加 display: flex、justify-content: center、align-items: center，并确保它有明确高度（如 min-height: 100vh 或固定 height）

  Flex 的兼容性已覆盖 IE11+，日常项目中几乎不用再考虑降级到 position: absolute + transform 这种写法——除非你正在维护一个必须支持 IE9 的老系统。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！