表格页面级居中需父容器用Flexbox或Grid，如display: flex; justify-content: center; align-items: center; min-height: 100vh；单元格内居中用vertical-align: middle（需行高基准）或display: flex，二者逻辑分离不可混用。
表格整体在页面中垂直居中：用 Flexbox 包裹，别碰 vertical-align
表格本身不能靠 vertical-align 在页面里上下居中——这个属性只对 td、th 和行内元素有效，对 table 元素完全无效。真正能稳定实现“整张表在视口或容器中垂直+水平居中”的，只有父容器用 Flexbox 或 Grid。
推荐写法：
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"> <table>...</table> </div>
-
min-height: 100vh确保父容器有足够高度可居中，不用依赖 body 高度设置 - 避免把
display: flex直接加在body上——某些重置样式或第三方脚本会干扰 - 如果表格需响应式宽度，保留
table { width: 100%; max-width: 800px; }，Flex 不会破坏它 - 慎用
position: absolute+transform：打印预览时易错位，屏幕阅读器可能跳过定位内容
td 里文字/图片垂直居中：用 vertical-align: middle，但得配行高
想让单元格内容（比如一行文字或一张图标）在单元格内部上下居中，必须设在 td 或 th 上，且要确保该行有可参照的高度。
常见失效原因：
<td style="vertical-align: middle;">文本</td>看不出效果，是因为这行没显式高度，浏览器按内容撑开，middle 就失去参照基准。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给
tr设height: 60px或给td设line-height: 60px，vertical-align: middle才能体现 - 取值只能是
top、middle、bottom；写成"center"会彻底失效 - 含图片时，若图片设了
display: block，vertical-align失效——去掉该声明，或改用display: flex替代 - 多行文本 + 图标混合？直接上
td { display: flex; align-items: center; }，更可控
为什么 align="center" 和 valign="middle" 不能用了
它们不是“浏览器不支持”，而是 HTML5 标准里被明确定义为**废弃（obsolete）** 的属性。W3C 验证器报错，现代构建工具（如 Vite + ESLint）默认警告，微信公众号编辑器、Outlook 邮件模板等环境渲染行为不可预测。
立即学习“前端免费学习笔记（深入）”；
<table align="center"> → 实际触发的是 <code>display: inline-table，导致margin: 0 auto失效<td valign="middle"> → 浏览器可能解析，但优先级与 CSS 冲突，调试时复现困难<li>残留这些属性会导致无障碍工具无法正确识别语义，影响读屏软件播报</li> <li>旧项目迁移时，全局搜索替换 <code>align=和valign=是必要步骤
复杂场景：跨列单元格 + 垂直居中，colspan 要配合 table-layout: fixed
当某行用 colspan="2" 合并两列，又希望内容在合并区域里垂直居中，光靠 vertical-align 容易因列宽自动计算而偏移。
稳妥做法：
<table style="table-layout: fixed; width: 100%;"> <col style="width: 33.33%;"><col style="width: 33.33%;"><col style="width: 33.34%;"> <tr><td colspan="2" style="vertical-align: middle; text-align: center;">跨列内容</td></tr> </table>
-
table-layout: fixed强制浏览器按<col>或内联 width 计算列宽，避免内容撑开导致居中基准漂移 - 务必让所有
<col>宽度之和 ≈ 100%，否则最后一列可能被压缩或溢出 - 如果表格需响应式，用
max-width+width: 100%组合，不要丢掉table-layout: fixed - 这种写法对打印友好，也兼容多数邮件客户端（如 Apple Mail）
关键点其实就一个：表格的“页面级居中”和“单元格内居中”是两套逻辑，混用就会失效。前者靠父容器布局（Flex/Grid），后者靠单元格自身样式（vertical-align 或 display: flex），中间没有桥梁。
