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 冲突
真正容易被忽略的点：居中是针对「块级元素在块级上下文中的定位」，而表格默认就是块级框；关键不在“怎么写”，而在“写在哪”和“有没有破坏前提条件”。margin: 0 auto 看似简单，但漏掉 width 或父容器用了 flex，就彻底失效。
