直接给或设text-align:center和vertical-align:middle可解决大部分居中需求，但需确保单元格有高度基准；vertical-align仅对table-cell元素生效，设在tr或div上无效；多元素布局推荐flex替代。

直接给 <td> 或 <code><th> 加 <code>text-align: center 和 vertical-align: middle 就能解决大部分场景，但必须确保单元格有可参照的高度基准，否则 vertical-align: middle 会“失效”——不是没生效，而是没地方可对齐。

vertical-align: middle 必须作用在 td/th 上

vertical-align 只对 display: table-cell 元素有效，也就是默认的 <td> 和 <code><th>。设在 <code><table>、<code><tr> 或包裹的 <code><div> 上完全无效。 <ul> <li>✅ 正确：<code><td style="vertical-align: middle">内容</td>

❌ 无效：<tr style="vertical-align: middle"><td>内容</td></tr>

❌ 无效：<td><div style="vertical-align: middle">内容</div></td>（<div> 默认是 <code>block，不支持 vertical-align）

vertical-align 看不见效果？先查 height 和 line-height

vertical-align: middle 是相对单元格“行盒高度”计算的，不是绝对居中。如果单元格没显式高度，浏览器按内容撑开，视觉上就看不出居中。

• 单元格高度太小（如 height: 20px），而文字默认 line-height 是 1.2 倍字号，内容会被压到顶部
• 没设 line-height，或 line-height 小于容器高度，基线偏移导致视觉上偏高
• 多行文本时，vertical-align: middle 对齐的是整块“行盒”的中点，不是每行文字中心——这是标准行为
• 更稳妥做法：用 padding: 8px 12px 替代硬设 height，留出自然呼吸空间

单元格里塞了 div/button/图标？别硬扛 vertical-align

当 <td> 内含多个块级元素（比如图标 + 文字 + 按钮），<code>vertical-align 往往控制不了布局节奏，这时该切到 display: flex。

• 给 <td> 加 <code>style="display: flex; align-items: center; justify-content: center;"，子元素真正居中
• 只需垂直居中、水平左对齐？用 align-items: center; justify-content: flex-start
• 注意：flex 会覆盖 vertical-align，且要求父单元格保持 display: table-cell（默认就是，不用额外写）
• 慎用于成百上千单元格——每个 flex 容器都增加渲染开销；纯文本仍优先用 vertical-align

别混用 align="center" 和 CSS 居中

align 和 valign 属性在 HTML5 中已废弃，继续用会导致校验失败、WebView 行为不一致、无障碍工具忽略，而且和 CSS 冲突时结果不可预测。


html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载
• ❌ 避免：<td align="center" valign="middle">内容</td>
• ✅ 统一用：<td style="text-align: center; vertical-align: middle;">内容</td>
• 整表批量控制推荐：table td, table th { text-align: center; vertical-align: middle; }，漏掉 th 是常见疏忽

真正麻烦的不是怎么写样式，而是当单元格里嵌套了 <p></p>、<div> 或设置了 <code>margin/line-height 的元素时，那些隐性样式会悄悄干扰 vertical-align 的表现——得一层层 inspect 计算后的行盒高度，而不是只盯着 CSS 规则看。