vertical-align: middle 必须与 text-align: center 同时作用于 td/th 才能实现文字水平且垂直居中，因二者分别控制垂直与水平对齐，且仅对 table-cell 元素生效；单独设置任一属性均无法达成完整居中效果。
vertical-align: middle 必须和 text-align: center 同时用
只设 vertical-align: middle，文字看起来还是靠上；只设 text-align: center，文字水平居中但垂直方向没动。二者作用域不同：前者管行内内容在单元格内的垂直位置，后者管水平位置，缺一不可。
常见错误是给 <tr> 或 <table> 设这两个属性——它们不生效。vertical-align 只对 <td>、<th> 和 display: table-cell 元素起作用；text-align 虽然可继承，但若 <td> 里嵌了 <div>（display: block），那 text-align 就只影响该 <div> 里的文本，不影响 <div> 自身位置。
- 正确写法：
<td style="text-align: center; vertical-align: middle;">内容</td> - 整表统一控制：
td, th { text-align: center; vertical-align: middle; } - 避免在
<td>上同时写vertical-align和display: flex——后者会覆盖前者
复杂内容（图片/按钮/多行文本）优先用 flex
当 <td> 里不止一行文字，而是混排 <img>、<button> 或多个 <p> 时，vertical-align: middle 往往失效——它没有“容器高度”参照，尤其在内容高度不固定时。
此时把 <td> 当作 flex 容器更稳：display: flex; align-items: center; justify-content: center;。它不依赖行高或单元格显式高度，自动适配内容尺寸。
立即学习“前端免费学习笔记（深入）”；
- 必须设
height或min-height，否则 flex 可能“塌缩”，看不出居中效果 - 如果表格需无障碍支持（如屏幕阅读器），慎用此方案——
display: flex会破坏<td>的语义角色 - 不要给内部元素再设
margin: auto，flex 已接管对齐逻辑
表格整体居中别只靠 text-align: center
<div style="text-align: center"><table>...</table></div> 在某些旧版 WebView 或 strict mode 下可能不生效——因为 <table> 默认是块级元素，text-align 对它无效。
真正可靠的写法是让 <table> 自己响应 margin: 0 auto，前提是它有明确宽度：
<table style="width: 600px; margin: 0 auto;">- 或
<table style="width: 80%; margin: 0 auto;"> - 若父容器是 flex，直接设父容器
display: flex; justify-content: center;，无需预设表格宽度 - 避免
<table style="width: 100%">+margin: 0 auto——它已占满，左右没空间可分
兼容性兜底：IE11 及更老环境怎么处理
IE11 支持 vertical-align: middle 和 text-align: center，但不支持 display: flex 在 <td> 上（会退化为 block）。如果必须兼容 IE11：
- 放弃
flex方案，改用line-height配合固定高度模拟垂直居中（仅适用于单行文本） - 给
<td>设height: 40px; line-height: 40px;，再加text-align: center; - 多行内容用
padding: 12px 0;手动估算上下留白，不如 flex 精准但足够应付简单表格 - 彻底放弃
valign和align属性——它们在 IE11 中行为不稳定，且现代构建工具（如 Webpack + HTML minifier）常直接剔除
最容易被忽略的是：居中效果是否“可见”，往往不取决于代码写没写对，而取决于 padding 是否足够、font-size 是否过大、或者 border-collapse: collapse 下边框侵占了视觉空间。调试时先临时加 outline: 1px solid red 看清单元格真实范围，再调样式。
