justify-content不能直接作用于表格元素，因其是flex容器属性，而默认为display:table；需将内容包裹在display:flex的容器中才能生效，并注意父容器高度需可计算。

justify-content 不能直接作用于

元素

因为 justify-content 是 Flexbox 的容器属性，而 <table> 默认是表格布局（<code>display: table），不是 flex 容器。直接给 <table> 或 <code><tr> 设置 <code>justify-content 完全无效——浏览器会忽略它，控制台也不会报错，但布局毫无变化。

想用 justify-content 居中，必须先让目标元素变成 flex 容器

常见错误是试图在 <td> 里写 <code>justify-content: center 却没配 display: flex；正确做法是：把需要居中的内容包裹进一个块级容器（如 <div>），再对该容器启用 Flexbox： <ul><li>给 <code><td> 内的 <code><div> 设置 <code>display: flex

再加 justify-content: center（水平居中）和/或 align-items: center（垂直居中）

<td> 本身保持默认 <code>display: table-cell，无需改 display

示例：

<td>
  <div style="display: flex; justify-content: center; align-items: center;">
    <span>我要居中</span>
  </div>
</td>

为什么不用 vertical-align: middle？

如果只是单行文本或内联内容，vertical-align: middle 配合 text-align: center 更轻量、兼容性更好。但一旦内容包含多个块级子项（比如图标+文字+按钮）、需要间隙（gap）或响应式换行，vertical-align 就失效了——此时必须用 display: flex + justify-content / align-items。

嵌套 flex 容器时 align-items 不会继承

align-items 只作用于直接子元素，不会穿透到孙级。例如：<td> 内有一个 <code><div class="wrapper"> 设了 <code>display: flex; align-items: center，它的子元素（如 <img> 和 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>）会垂直居中；但如果你在 <p></p> 里再放一个 <span></span>，它不会自动继承居中效果——除非 <p></p> 自己也设成 flex 容器。

容易漏掉的关键点：父容器高度必须可计算。如果 <td> 没有显式高度（比如内容撑开），<code>align-items: center 在垂直方向可能“看起来没反应”。调试时可在 <td> 上临时加 <code>height: 60px; border: 1px solid red 确认空间是否存在。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！