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