HTML5中align属性已废弃，必须用CSS实现对齐：text-align控制块内行内内容水平对齐；margin:0 auto使定宽块级元素自身水平居中；flexbox支持水平垂直居中；vertical-align和writing-mode适用于特殊场景。
align 属性在 HTML5 中已废弃，**不能用它实现可靠对齐**。所有现代项目必须改用 CSS，否则会出现兼容性断裂、无障碍失效、W3C 验证失败等问题。
text-align 控制文本和行内元素水平对齐
这是最常用也最容易误用的对齐方式。它只作用于块级容器（如 <p>、<div>、<th>）内部的行内内容，不移动块本身。
- 给父容器加
text-align: center，能让里面的文字、<span>、<img>（默认行内）水平居中 - 常见错误：给要居中的
<div>自己加text-align: center—— 这只会让它内部的文字居中，盒子位置不变 - 表格单元格统一居中：
td, th { text-align: center; }；整列控制可用<col>+ 类选择器 - 注意父容器宽度：如果父
<div>没撑开（比如浮动塌陷或未设宽），text-align看不出效果
margin: 0 auto 实现块级元素自身水平居中
这是让一个 <div>、<section> 或 <table> 在页面里水平居中的经典方法，但有硬性前提。
- 必须显式设置宽度：
width: 600px、width: 80%或max-width: 768px - 写法是
margin: 0 auto（上下边距为 0，左右自动），不是margin: auto - 不能和
float、position: absolute共存；若父容器用了float，需先清除浮动或触发 BFC - 表格居中也适用：
<table style="width: 100%; max-width: 800px; margin: 0 auto;">
flexbox 实现真正可控的水平+垂直居中
当需要同时控制水平和垂直方向，或者子元素尺寸不确定时，display: flex 是目前最稳妥的方案。
- 父容器设
display: flex; justify-content: center; align-items: center; - 父容器必须有高度才能让
align-items: center生效，例如min-height: 100vh或固定height: 400px - 子元素无需定宽高，无论它是
<div>还是<span>都能居中 - IE10/11 存在部分 bug（如
flex: 1行为异常），如需支持，建议加align-items: flex-start显式重置交叉轴 - 避免用 flex 父容器包裹
<table>—— 会破坏colspan/rowspan渲染，打印和屏幕阅读器可能出错
vertical-align 和 writing-mode 处理特殊对齐场景
vertical-align 不是给父容器用的，writing-mode 也不只是“竖排文字”玩具。
立即学习“前端免费学习笔记（深入）”；
-
vertical-align: middle只对display: inline、inline-block、table-cell元素生效，常用于图文混排：img { vertical-align: middle; } - 表格单元格内垂直居中必须写在
<td>或<th>上，不能写在<tr>或<table> -
writing-mode: vertical-lr改变文本流后，text-align: center就变成控制“垂直方向”的居中，适合东亚竖排设计 - 不要把
writing-mode当成通用垂直居中方案——它改变的是整个块的布局流向，副作用明显
