html5中对齐必须依赖css：text-align作用于块级容器内行内内容；margin:0 auto需定宽块级元素；flexbox用justify-content和align-items实现双向精确对齐。
纯 HTML 标签本身无法实现可靠对齐效果，align 属性在 HTML5 中已被废弃，浏览器兼容性差且行为不可控；所有现代对齐必须依赖 CSS。
用 text-align 对齐文字和行内元素
这是最轻量、最常用的对齐方式，但只作用于块级容器内部的行内内容（如文本、img、span）。
- 写在父容器上才生效，比如
<div style="text-align: right"><p>文字</p></div>—— 不能写在<p></p>自身上再期望它“把自己挪右” -
text-align: center对<div> 子元素无效，除非该子元素是 <code>display: inline-block或图片等替换元素 - 邮件客户端（如 Outlook）仍会优先识别已废弃的
align="right"属性，但仅限少数标签（如<p></p>、<div>），不推荐在 Web 页面中使用 <h3>用 <code>margin: 0 auto水平居中块级模块适用于有明确宽度的独立模块（如卡片、表单框），但极易因忽略前提而失效。
- 必须同时满足：元素为块级（默认或设
display: block）、显式设置width（如width: 400px或width: 80%）、父容器宽度大于子元素 -
width: fit-content可替代固定宽，但在 Safari 15.4 之前需加-webkit-fit-content前缀 - 若父容器用了
display: flex，margin: 0 auto会被justify-content覆盖，此时它完全不工作
用 Flexbox 实现精确双向对齐
这是当前最稳定、语义最清晰的模块对齐方案，尤其适合导航栏、卡片组、登录框等常见布局。
- 水平居中：父容器设
display: flex+justify-content: center - 垂直居中：还需加
align-items: center，但要求父容器有明确高度（如min-height: 100vh）或内容撑高 - iOS 9.3 之前 Safari 对
justify-content: center在含图片的单行 flex 容器中支持异常，建议加align-items: flex-start显式重置交叉轴行为 - 右对齐整个模块组：用
justify-content: flex-end；只让某一个子项靠右：给它加margin-left: auto
容易被忽略的关键点
对齐失败往往不是代码写错，而是没理清作用对象和上下文约束：比如给
<img>加text-align: center没用，因为它不是块级容器；又比如在display: grid父容器里还试图用margin: 0 auto居中子项，那只会被网格轨道规则覆盖。真正要盯住的，永远是「谁在对齐谁」「谁控制着空间分配」。 - 必须同时满足：元素为块级（默认或设
