如何让HTML表格水平居中显示：ALIGN属性控制容器页面布局

作者：袖梨 2026-07-14

table 的 align="center" 已被 HTML5 完全废弃，应改用 margin: 0 auto 实现居中，前提是显式设置 width（非100%）且父容器未启用 flex/grid。

table 的 align="center" 已失效，别再用了

HTML5 中 align 属性在 <table> 上**已被完全废弃**，不是“不推荐”，而是 W3C 明确移除。浏览器可能暂时兼容，但：
• 严格 DOCTYPE 下验证失败
• Safari 或部分 WebView 中直接不生效
• 实际会把 <table> 变成 display: inline-table，导致 margin 和 width 行为异常
• 无障碍工具可能忽略该属性

让整个表格在页面中水平居中：margin: 0 auto 是最稳方案

这是兼容性最好（IE8+）、语义清晰、无需额外包裹的主流做法，但必须满足三个条件：

table 元素本身是块级上下文（默认就是，不用加 display: block）
显式设置 width —— 不能是 width: 100%，得是具体值，比如 width: 80% 或 width: 600px
确保父容器没设 display: flex 或 display: grid，否则 margin: 0 auto 会被覆盖

示例写法：

<table style="margin: 0 auto; width: 80%;"><br>  <tr><td>A</td><td>B</td></tr><br></table>

响应式更优写法：
style="width: 100%; max-width: 800px; margin: 0 auto;"——宽屏居中，窄屏自适应撑满

text-align: center 对 table 无效，别乱套用

给 <table> 加 style="text-align: center" 不会让表格居中，它只影响表格内部的**行内内容对齐**（比如单元格里的文字、图片），和表格自身位置无关。

立即学习“前端免费学习笔记（深入）”；

错误写法：<table style="text-align: center"> → 表格依然靠左
正确目标：控制表格位置，操作对象必须是 <table> 自身，不是它的父容器或内部元素
如果非要用 text-align，只能作用于表格的**父块级容器**，且需配合 display: inline-table（不推荐，增加不可控性）

Flex/Grid 方案可行，但要注意副作用

用 display: flex 或 display: grid 居中表格，本质是控制**父容器**，不是表格本身：

Flex 写法：<div style="display: flex; justify-content: center;"><table>...</table></div> —— 简单直接，但父容器变成 Flex 上下文后，所有直系子元素（包括 <table>）都受 flex 规则约束
Grid 写法：<div style="display: grid; place-items: center;"><table>...</table></div> —— 更简洁，但要求父容器有明确尺寸（如 min-height: 100vh 才能保证垂直居中可见）
共同风险：若表格内用了 colspan/rowspan，某些旧版打印样式或屏幕阅读器可能解析异常；float、position: absolute 等属性会与 Flex/Grid 冲突