text-align控制单元格内文字水平对齐，须写在<td>或<th>上；vertical-align控制垂直对齐，仅对table-cell有效；表格居中用margin:0 auto加明确宽度；align-content对表格无效。
text-align 控制单元格内文字水平对齐
表格内容的水平对齐必须用 text-align，写在 <td> 或 <th> 上才真正生效。别再用 align="right" 这类 HTML 属性——它已被 HTML5 彻底废弃，W3C 验证器会报错，且在 Outlook、旧版 WebView 中大概率失效。
常见写法：
-
<td style="text-align: right;">¥12,345.67</td>—— 单元格右对齐，适合金额 -
td:nth-child(3) { text-align: center; }—— 第三列统一居中 -
<col class="amount"></col>+.amount { text-align: right; }—— 语义清晰，便于维护
注意：text-align 只影响行内内容（文本、<img> 默认是行内），对 <div> 这类块级子元素无效；若单元格里有 <div>，需单独给它加 margin: 0 auto 或 display: inline-block。
vertical-align 控制单元格内内容垂直对齐
vertical-align 是唯一能影响 <td> 和 <th> 内部垂直位置的 CSS 属性，但它不是“让整行上下居中”，而是调节单元格内内容相对于当前行盒（line box）的基线/顶部/底部位置。
立即学习“前端免费学习笔记（深入）”；
关键事实：
- 默认值是
middle，不是baseline；显式写vertical-align: baseline容易错位，尤其混排图片或表单控件时 - 它只对
display: table-cell（即原生<td>）和行内元素有效，写在<table>或<tr>上完全没反应 - 效果依赖行高：如果
<tr>高度由内容撑开，middle可能看不出居中感；可配合height或line-height强制约束
稳妥做法：<td style="vertical-align: middle; height: 48px;">多行文本</td>，比单靠 vertical-align 更可控。
margin: 0 auto 让整张表格水平居中
想让 <table> 在页面中水平居中，唯一标准方式是 margin: 0 auto，但有两个硬性前提：
- 必须给
<table>设置明确宽度，例如width: 80%、width: 600px或width: max-content - 父容器不能有
float、display: inline或overflow: hidden等干扰块级流的样式
错误示范：<table align="center"> —— 浏览器可能渲染出“看起来居中”的效果，实则是触发了非标准浮动逻辑，Chrome 和 Firefox 行为不一致，在 flex 容器里直接失效，且破坏可访问性。
align-content 对表格完全无效
align-content 是 Flexbox 和 Grid 的属性，对原生 <table> 布局无任何作用。无论你把它写在 <table style="align-content: center"> 还是 <tr> 上，浏览器都会忽略，开发者工具里也看不到 computed 值。
如果你真需要交叉轴（比如多行数据在容器中垂直居中）的精细控制，说明你已经超出了表格语义的适用范围：
- 用
display: grid替代<table>，再配align-content: center和grid-auto-rows - 或用
display: flex; flex-wrap: wrap包裹数据项，设置容器高度后align-content才起效
表格的语义是“关系型数据”，不是“视觉网格”。强行给它套 Flex/Grid，会丢掉 colspan/rowspan、打印样式、屏幕阅读器支持等关键能力。
