表格单元格内容同时水平垂直居中的标准做法是：为<td>和<th>设置text-align: center和vertical-align: middle，并确保<tr>或表格行有明确高度（如height: 40px），因vertical-align需参照基准才能生效；HTML的align和valign属性已被HTML5废弃，应统一使用CSS控制。
表格单元格内容如何同时水平垂直居中
默认情况下，<td> 和 <th> 的内容只水平居中（靠 text-align: center），垂直方向会贴顶。要真正居中，必须显式控制垂直对齐方式。
最直接有效的方式是给单元格设置 vertical-align: middle，并确保单元格有明确高度（否则浏览器按内容撑开，middle 无参照基准）。
-
vertical-align只对table-cell（即<td>/<th>）和行内元素生效，不能用在<div>上 - 如果父
<tr>没有设高，单设height在<td>上可能被忽略；推荐统一在<tr>或<table>上设最小高度（如min-height）或固定height - 避免用
line-height模拟垂直居中——它只对单行文本可靠，换行或含图片时失效
CSS 实现双向居中的最小可行代码
以下是最简、可复用的写法，兼容所有现代浏览器（包括 IE11）：
<style>
table {
width: 100%;
border-collapse: collapse;
}
td, th {
text-align: center;
vertical-align: middle;
padding: 8px;
border: 1px solid #ddd;
}
/* 确保行有足够高度供 middle 对齐 */
tr {
height: 40px;
}
</style>
<p><table>
<tr>
<td>文字</td>
<td><img src="icon.png" height="24"></td>
</tr>
</table>注意：tr { height: 40px } 是关键。若用 min-height，部分老版本 Chrome 可能不触发 vertical-align 计算，优先选固定 height 或 line-height（仅限纯文本场景）。
立即学习“前端免费学习笔记（深入）”；
含多行内容或复杂子元素时的处理
当 <td> 里有段落、按钮或 flex 布局子元素时，vertical-align: middle 仍生效，但对子元素内部布局无影响。此时需额外控制子元素自身对齐。
- 若子元素是块级（如
<p>），可在<td>上加display: flex; align-items: center; justify-content: center—— 但会破坏表格语义和响应式行为，慎用 - 更稳妥的做法：保持
vertical-align: middle，再给子元素设margin: auto（需子元素有宽高限制）或用display: inline-block+vertical-align: middle配合 - 绝对定位方案（
position: absolute+transform: translate(-50%, -50%)）可行，但需父<td>设position: relative，且脱离文档流，影响自动列宽计算
为什么用 CSS 而不用 HTML 属性 align 和 valign
align="center" 和 valign="middle" 是 HTML4 旧属性，已被 HTML5 废弃。它们在现代浏览器中虽仍能工作，但存在明显问题：
-
valign在 Firefox 中对<th>支持不稳定 - 无法与 CSS 优先级机制配合，容易被样式表覆盖且调试困难
- 不支持响应式场景（比如小屏下想取消居中），而 CSS 可用媒体查询精确控制
- Vue/React 等框架中，内联属性写法（如
v-bind:valign）不如 class 管理清晰
实际项目里，哪怕只是临时改一个表格，也建议直接写 class 或 style，别碰 valign。
真正麻烦的不是写法，而是忘记给行设高度——vertical-align: middle 看似简单，没高度就等于没写。
