表格在页面中水平居中唯一可靠方式是margin: 0 auto，但必须同时满足：表格有明确宽度（如width: 80%或max-width: 800px），且父容器为普通块级流（非flex/grid/float等）。

表格在页面中默认左对齐，align="center" 已被 HTML5 移除，写上也不起作用——这不是兼容性问题，而是语法非法，验证器报错、无障碍断裂、部分 WebView 直接忽略。

整张表格在页面中水平居中：只用 margin: 0 auto

这是最可靠、兼容 IE8+、无需 JS 的方案，但有两个硬性前提必须同时满足：

• table 必须有明确宽度，比如 width: 80%、width: 600px 或响应式组合 width: 100%; max-width: 800px；width: 100% 单独用会失效，因为左右没空余可分配 margin
• 父容器不能是 float、display: inline、overflow: hidden 或 Flex/Grid 容器（否则会干扰块级流）
• 别给 table 加 display: inline-table 或 float，它们会让 margin: 0 auto 彻底失效

推荐写法：

单元格内容水平居中：必须作用在 td 或 th 上

text-align: center 控制的是单元格内部行内内容（文字、图片、span）的对齐，它对 table 或 tr 无效——加在 table 上等于白写。

• 单个单元格：

整表统一：table td, table th { text-align: center; }（别漏掉 th）

按列控制（如金额列右对齐）：td:nth-child(3), th:nth-child(3) { text-align: right; }

如果 td 里嵌了

，text-align: center 不会穿透生效，得单独给 div 加 margin: 0 auto 或 display: flex; justify-content: center

单元格内容垂直居中：用 vertical-align: middle，但别设死 height

vertical-align: middle 只对 td 和 th 有效，写在 table 或 tr 上完全没反应。它不是让表格在页面中垂直居中，而是控制单元格内“行内盒”在行高范围内的垂直位置。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 统一设置：td, th { vertical-align: middle; }
• 常见“看起来没居中”是因为：height 设得太小（比如 height: 20px），而默认行高 > 字号；建议用 padding: 8px 12px 替代硬 height
• 含多行文本时，vertical-align: middle 对齐的是整行盒中点，不是每行文字中心——这是规范行为，不是 bug
• 别给 tr 设 vertical-align，W3C 明确不支持

跨列单元格（colspan）怎么居中

colspan 合并后，居中样式不会从 tr 或 table 继承，必须显式加在该 td 或 th 上。

• 错误写法：

→ 无效

正确写法：

colspan 值不能超过当前行总列数（如共 3 列，colspan="4" 会导致后续单元格偏移、结构错乱）

若需视觉上更稳的居中分隔，可配合 table-layout: fixed 和等宽 th/td 设置

真正容易被忽略的点是：表格语义和布局逻辑强耦合。用 Flex/Grid 包裹表格虽能“居中”，但可能破坏 colspan/rowspan 渲染、影响打印预览和屏幕阅读器识别——除非你确定这张表只是视觉容器，而非数据结构。

内容

标题

标题

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！