display:table-cell能垂直居中，因其模拟表格单元格并原生支持vertical-align:middle；需父容器设display:table和固定高度、子元素设display:table-cell及vertical-align:middle，缺一不可，兼容ie8+。
为什么 display: table-cell 能垂直居中？
因为 table-cell 模拟了表格单元格的行为，天然支持 vertical-align 属性——它不是靠 flex 或 transform“骗”出来的居中，而是浏览器原生对齐逻辑。只要父容器设为 display: table，子元素设为 display: table-cell，再配 vertical-align: middle，就能稳定生效，且兼容 IE8+。
table-cell 垂直居中的最小必要结构
必须同时满足三个条件，缺一不可：
- 最外层容器（如
<div class="wrapper">）设 <code>display: table，高度需明确（比如height: 200px或min-height） - 中间包裹层（通常一个空的
<div>）设 <code>display: table-cell和vertical-align: middle - 真正要居中的内容（文字、图片、按钮等）放在该
table-cell内，无需额外定位
示例：
<div class="wrapper">
<div class="cell">
<p>我要垂直居中</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
</div>
CSS：
.wrapper {
display: table;
width: 100%;
height: 200px; /* 必须有高度 */
}
.cell {
display: table-cell;
vertical-align: middle;
text-align: center; /* 水平居中可选 */
}
常见踩坑：为什么内容没居中？
绝大多数失败都源于这几点：
-
table-cell的父容器没设display: table，或忘了设高度（height/min-height） - 误把
vertical-align加在内容元素上（如p { vertical-align: middle }），它只对table-cell、inline等元素有效 - 用了
float或position: absolute破坏了 table 布局流，导致table-cell失效 - 父容器宽度为 0 或被其他样式撑开异常，间接导致高度塌陷
和 flex 布局比，table-cell 适合什么场景？
不是过时方案，而是有明确优势的补充选择：
- 需要兼容 IE8–IE11 且不想用 JS fallback 时，
table-cell是少数可靠方案 - 内容高度动态变化（比如多行文本），flex 的
align-items: center在某些老版本安卓 WebView 中有偏移 bug，而table-cell更稳 - 嵌套层级深、已有大量
display: inline-block或浮动布局，强行切 flex 易引发连锁重排，用table-cell可局部替换、风险低
但注意：table-cell 不支持 margin（会失效），间距得靠 padding 或内层元素控制；也不能直接设置 flex 相关属性。
