text-align是唯一标准、可靠的水平对齐属性，必须作用于<td>或<th>等块级容器以控制其内部行内内容对齐；align="center"等HTML属性在HTML5中已废弃，会导致兼容性差、W3C验证失败和样式不可控。
text-align 是唯一该用的水平对齐属性
HTML 标签里直接写 align="center" 或 align="right" 是错的——这些属性在 HTML5 中已被废弃，浏览器虽可能兼容，但会导致样式不可控、审查报错、团队协作混乱。真正起作用且被标准支持的，只有 CSS 的 text-align。
它只作用于块级容器（如 <div>、<p>、<th>、<td>），控制其内部行内内容（文字、图片、<span> 等）的水平位置。
-
text-align: left：默认值，左对齐 -
text-align: center：居中（最常用） -
text-align: right：右对齐 -
text-align: justify：两端对齐，适合多段落正文，但注意中文效果有限，词距拉伸不自然
表格单元格（<td> / <th>）要单独处理
表格里的对齐容易被误认为是“整行”或“整表”的事，其实 text-align 必须作用在单元格级，而不是 <tr> 或 <table> 上。因为 <tr> 本身不是块级容器，不接受 text-align；而 <table> 即使设了，也不会向下继承到单元格。
正确写法是：
立即学习“前端免费学习笔记（深入）”；
td, th {
text-align: center;
}
或者更精细地控制：
- 数字列右对齐：
td.number { text-align: right; } - 标题列居中：
th { text-align: center; } - 操作列左对齐（留出图标/按钮空间）：
td.action { text-align: left; }
别把 text-align 当成“让 div 居中”的工具
这是新手最常踩的坑：text-align: center 放在父 <div> 上，想让它里面的另一个 <div> 水平居中——没用。因为 text-align 不影响块级子元素的位置，只影响行内内容。
要让块级元素（比如一个卡片 <div class="card">）在父容器中水平居中，得用：
-
margin: 0 auto（需有明确宽度） -
display: flex; justify-content: center（推荐，无宽度限制） -
display: grid; place-items: center（现代布局，一行搞定）
混用 text-align 和 margin: auto 不仅无效，还会造成调试困惑。
响应式场景下，对齐方式可能需要断点重置
移动端窄屏时，居中文字可能因换行导致视觉偏移；右对齐的按钮在小屏上可能紧贴边缘。不要假设一套 text-align 能通吃所有尺寸。
例如，表格在手机上转为堆叠布局时，原本右对齐的金额列，可能更适合左对齐以保持阅读动线：
@media (max-width: 480px) {
td.amount, th.amount {
text-align: left;
}
}
还有种隐形陷阱：某些 UI 框架（如 Bootstrap）会全局重置 text-align，比如给 .text-center 加 !important，结果你自定义的类被覆盖。查 computed styles 比猜更可靠。
