vertical-align: middle 经常没反应，是因为它仅对 display: table-cell 元素（如默认 td/th）生效；写在 tr/table 上无效，td 内嵌 div、设 display: block/flex、高度不足或内容被块级元素包裹均会导致失效。
vertical-align: middle 为什么经常没反应
不是写错了，而是它只对 display: table-cell 元素生效——也就是默认的 <td> 和 <th>。常见失效场景包括：
- 把
vertical-align: middle写在<tr>或<table>上（完全无效） -
<td>里套了<div>，又给这个<div>设了vertical-align（但<div>默认是display: block，不支持该属性） - 给
<td>加了display: block或display: flex，直接破坏了表格单元格上下文 - 单元格高度太小，比如只有单行文本+默认行高，视觉上“看不出”居中效果
验证是否生效：临时加 border: 1px solid #ccc 和 min-height: 40px，看内容是否真正在框内居中。
纯文本内容用 vertical-align 就够了
只要结构简单（纯文字、单行输入框、单个 <img>），直接在 <td> 上设 CSS 即可：
td {
text-align: center;
vertical-align: middle;
padding: 8px 12px;
}
注意三点：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
text-align: center控制水平居中，vertical-align: middle控制垂直居中，二者缺一不可 - 避免只靠
line-height模拟居中——多行文本会撑高，line-height失效，而vertical-align依然可靠 - 不要用已废弃的 HTML 属性
valign="middle"，它无法被 JS 动态修改，且易被 CSS 覆盖
含按钮/图片/多行内容时改用 Flex 布局
一旦 <td> 里有嵌套块级元素（比如 <button> + <p> + <img>），vertical-align 就力不从心了。此时应把 <td> 变成 Flex 容器：
td.flex-center {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
}
这样做的实际影响：
- 任意子元素（不管多少层嵌套）都能稳稳居中
- 会丢失原生表格的自动等宽行为，如果列宽依赖
table-layout: auto，需额外加width或min-width - IE11 不支持
place-items: center，但支持display: flex，所以这是兼容性与能力的平衡点
表格整体在父容器中垂直居中怎么搞
这是另一个常见混淆点：上面讲的是“单元格内容居中”，这里是“整个 <table> 在它的父 <div> 里居中”。不能对 <table> 自身设 vertical-align，得操作父容器：
- 父容器设
display: flex; align-items: center; justify-content: center;—— 最简洁可靠 - 父容器设
position: relative;，<table>设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);—— 需确保父容器有明确高度 - 避免用
margin: auto+text-align: center组合：只能水平居中，垂直方向无效
真正容易被忽略的是：表格本身若设了 width: 100% 或 display: block，会破坏 flex 居中的前提条件——它必须是正常流内的块级元素，且不能撑满父容器宽度。
