应使用CSS的text-align和vertical-align替代已废弃的HTML align/valign属性；前者语义清晰、行为稳定，后者仅对table-cell类元素生效且依赖高度支撑。
直接用 text-align 控制水平对齐，vertical-align 控制垂直对齐；所有带 align 或 valign 属性的 HTML 标签写法（如 <td align="center">、<tr valign="middle">）都已废弃，别再用了。
为什么 align 和 valign 不能写在标签上
浏览器虽会兼容性解析，但行为不一致：Chrome 可能覆盖你写的 style，Firefox 可能直接忽略；W3C 验证器报错 Attribute align is obsolete. Use CSS instead.；和 Bootstrap 等框架共存时，样式优先级混乱，调试时很难复现问题。更麻烦的是，align="center" 加在 <table> 上根本不是居中表格，而是触发浮动（类似 float: left + 自动 margin），在 flex 容器里直接失效。
text-align 怎么用才不出错
它只作用于块级容器（如 <td>、<p>、<div>）内部的行内内容，语义清晰、行为稳定：
- 整列右对齐金额：
td:nth-child(3) { text-align: right; } - 给语义加类更可控：
<td class="amount">¥12,345.67</td>+.amount { text-align: right; font-family: monospace; }（等宽字体防小数点错位） - 避免污染：
text-align: right加在<td>上，会把里面所有文字、按钮、图标全右推——想只右对齐按钮？得套一层<div class="btn-group">再单独设 - flex 容器里
text-align完全无效：父级是display: flex，控制主轴对齐得用justify-content，不是text-align
vertical-align 为什么经常“没反应”
它只对 <td>、<th> 或 display: table-cell 元素生效，且效果依赖高度支撑：
立即学习“前端免费学习笔记（深入）”；
-
vertical-align: middle是相对于该单元格自身高度居中，不是整张表；如果单元格没设height或min-height，又只有一行文字，就看不出居中效果 - 常见有效组合：
td, th { vertical-align: middle; height: 40px; } - 不要写在
<table>或<tr>上——加了也白加 - 图片和文字混排时，
vertical-align默认按 baseline 对齐，容易错位；统一设成vertical-align: middle并确保父单元格有高度，才能稳住
真正麻烦的不是“怎么写”，而是“写了为什么没效果”——多数时候是混淆了 text-align（管内容怎么摆）和 vertical-align（管单元格盒子内部内容怎么贴边），或者漏掉了高度、显示类型、父容器布局这些隐性前提。
