align属性在HTML5中已完全废弃，必须用CSS实现对齐：text-align控制行内内容水平对齐，margin: 0 auto（需设width）实现块级区域居中，Flex/Grid用于复杂布局。
align 属性在 HTML5 中已完全废弃，任何试图用 <div align="center">、<p align="right"> 或类似写法实现区域整体对齐的行为，都不可靠、不合法，且在严格 doctype 下会直接被 W3C 验证器标记为错误。
为什么 align 看似有效却必须停用
浏览器出于向后兼容仍会解析它，但实际触发的是非标准渲染逻辑：比如 <div align="center"> 可能让元素变成 display: inline-block，导致 margin、width 失效；在旧版 Android WebView 或某些无障碍工具中，它可能被完全忽略。更关键的是，它无法控制“区域整体”——你本想居中一个包含多个块级子元素的容器，align 却只尝试影响内部行内内容，结果往往只是文字偏移，而盒子本身纹丝不动。
margin: 0 auto 仅适用于有明确宽度的块级区域
这是最常被误用的方法。它不是“让区域居中”，而是“让块级元素在父容器中水平居中”。前提是：
- 目标元素必须是块级（默认
<div>、<section>满足） - 必须显式设置
width（如width: 80%、width: 600px或max-width: 720px） - 父容器不能有
float、display: inline或overflow: hidden等干扰布局的样式
没设 width 的 margin: 0 auto 就像没填目的地的导航——浏览器根本不知道“居中”基准在哪，直接失效。
立即学习“前端免费学习笔记（深入）”；
真正可靠的区域整体对齐必须用 CSS 布局模型
所谓“区域整体”，指一个包含多个子元素的容器（如 <div class="card">）在页面或父容器中的位置控制。此时应放弃单属性幻想，按场景选模型：
- 只需水平居中：父容器设
text-align: center，子区域设display: inline-block+ 显式width - 需水平+垂直双向居中：父容器设
display: flex; justify-content: center; align-items: center; - 需网格化对齐（如多卡片并排右对齐）：父容器设
display: grid; justify-content: end; - 要右对齐整个区域：Flex 下子项加
margin-left: auto，Grid 下用justify-self: end
注意：这些方案都作用于容器自身的位置或其子项的排列逻辑，而非“内部文字对齐”。混淆 text-align 和布局对齐，是多数人卡住的核心原因。
复杂点在于，“区域”是否需要响应式、是否含 colspan/rowspan、是否要打印兼容——这些会直接排除 flex 或 grid 某些用法。别指望一个标签搞定一切，现代对齐本质是「选对容器模型 + 控制子项行为」。
