表格水平居中用margin: 0 auto最可靠，但需明确宽度且不脱离文档流；单元格内容居中用text-align: center（作用于td/th），垂直居中用vertical-align: middle。
表格在页面中默认左对齐，align="center" 是无效且已废弃的写法，真正可靠的做法只有三种 CSS 方式，且都必须满足前提条件。
让整个表格在页面中水平居中
用 margin: 0 auto 是最直接、兼容性最好的方式，但它有两个硬性前提：
-
table必须有明确宽度（如width: 80%、width: 600px或max-width: 900px），否则margin: 0 auto不生效 - 父容器不能是
float、display: inline或overflow: hidden等干扰块级布局的环境 - 避免同时设置
display: inline-table或float，否则会覆盖margin行为
正确示例：
<table style="width: 80%; margin: 0 auto;">
让单元格内容水平居中
text-align: center 必须作用在 td 或 th 上才有效，写在 table 或 tr 上完全没用——因为表格元素本身不直接承载行内内容流。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 整表统一：用
table td, table th { text-align: center; } - 仅表头居中、内容左对齐：
th { text-align: center; } td { text-align: left; } - 按列控制（比如金额列右对齐）：
td:nth-child(3), th:nth-child(3) { text-align: right; } - 如果单元格里有
<div>，它不会继承text-align，需单独设margin: 0 auto或display: flex
让单元格内容垂直居中
vertical-align: middle 只对 td 和 th 生效，且效果受实际高度影响。常见“看起来没居中”不是 bug，而是以下原因：
- 单元格没设足够高度或
padding，文字被挤压；建议用padding: 8px 12px替代硬设height - 含多行文本时，
vertical-align: middle对齐的是整行盒的中点，不是每行文字中心 - 不要给
tr设vertical-align—— 它只作用于td/th内部内容 - 若用了
border-collapse: collapse，不影响vertical-align，但能减少边框干扰视觉判断
跨列后的内容怎么居中
用 colspan 合并列后，text-align: center 必须显式加在该 td 或 th 上，它不会从 table 或 tr 继承。
- 错误写法：
<tr style="text-align:center"><td colspan="2">标题</td></tr>→ 无效 - 正确写法：
<td colspan="2" style="text-align:center">标题</td> -
colspan值不能超过当前行总列数，否则表格结构错乱（例如一行共 3 列，colspan="4"会导致后续单元格偏移） - 响应式场景下，建议配合
table-layout: fixed和等宽<col>控制，避免浏览器重排导致“中点漂移”
最容易被忽略的是：所有居中操作都依赖具体作用对象——table 居中靠 margin，内容居中靠 text-align 和 vertical-align，而这两个属性只对 td/th 有效。混用 HTML 的 align 属性不仅验证失败，还会在 WebView 或打印预览中突然失效。
