学习用HTML编辑网页实现表格单元格内容居中-html教程-PHP中文网

vertical-align: middle 必须作用于或（display: table-cell 元素）才生效；写在或上无效，因其仅对表格单元格生效；常见失效原因包括子元素为块级、单元格高度不足、使用废弃的 valign 属性或容器 display 被错误设为 block。

学习用html编辑网页实现表格单元格内容居中

vertical-align: middle 必须作用在 <td> 或 <code><th> 上才有效，写在 <code><tr> 或 <code><table> 上完全没反应。 <h3>为什么 <code>vertical-align: middle 经常“不生效”

不是 CSS 写错了，而是被常见干扰项盖过去了：

<td> 里嵌套了 <code><div> 或 <code><p></p>：这些子元素默认是块级，vertical-align 对它们无效；得把 <td> 自己设成 <code>display: flex 才能控制内部布局
单元格高度太小，比如只有一行文本加默认 line-height：内容没空间“居中”，视觉上就看不出效果；加 padding: 8px 12px 或 min-height: 40px 就稳了
用了 border-collapse: collapse 但没注意边框本身占像素：临时加 outline: 1px solid red 能看清真实单元格范围，避免误判
写了 valign="middle"：HTML5 已废弃，React/Vue 会直接忽略，且和 CSS 冲突时行为不可预测

纯文本表格用这个组合最省事、兼容性最好（IE9+ 都支持）：

<td style="text-align: center; vertical-align: middle;">数据</td>

关键点：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

两个声明必须同时存在，缺一不可
不能只写在 <tr> 上——<code>vertical-align 只对 display: table-cell 生效，而 <tr> 是 <code>table-row
如果整张表都要居中，统一用 CSS 类更干净：
td, th { text-align: center; vertical-align: middle; }

一旦单元格里塞了 <img>、<button></button> 或多个 <p></p>，vertical-align 就失效了，得升级容器能力：

用 Flex：
<td style="display: flex; align-items: center; justify-content: center; min-height: 40px;"> <br>注意：<code>display: flex 会覆盖 vertical-align，二者不能共存
用 Grid（代码更短）：
<td style="display: grid; place-items: center; min-height: 40px;"> <br>但 IE11 不支持 <code>place-items，老系统慎用
别给 <td> 设 <code>display: block——这会让它彻底失去表格单元格语义，vertical-align 和 flex/grid 都救不回来
表格整体居中别只靠 margin: 0 auto

这个写法看似简单，但最容易踩坑：
- 必须配合明确宽度，比如 width: fit-content 或 width: 80%；写 width: 100% + margin: 0 auto 等于没写
- 父容器是 flex 或 grid 时，优先用 justify-content: center 控制，别在 <table> 上硬加样式 <li>检查有没有 <code>float、display: inline-table 或 overflow-x: auto 的父容器——这些都会让 margin: 0 auto 失效