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