align-items不能直接用于或，因其仅作用于flex容器；需先将设为display: flex才能生效，否则浏览器忽略该属性。

align-items 不能直接用在

或

上

因为 align-items 是 flex 容器的属性，而原生 <table>、<code><tr>、<code><td> 默认不是 flex 容器——它们走的是表格布局模型。直接给 <code><td> 写 <code>align-items: center 不生效，浏览器会忽略它。

想用 align-items，必须先把单元格变成 flex 容器

也就是说，得显式把 <td>（或 <code><th>）设为 <code>display: flex，才能启用 align-items：

• <td style="display: flex; align-items: center;">内容</td>
• 如果还要水平居中，加 justify-content: center
• 若单元格里有多个子元素（比如图标+文字），align-items 会统一控制它们在交叉轴上的位置
• 注意：flex-direction: row（默认）时，align-items 控制垂直对齐；设成 column 就反过来管水平了

为什么 vertical-align: middle 更常用？

因为 vertical-align: middle 原生支持 <td> 和 <code><th>，无需改 display： <ul> <li> <code><td style="vertical-align: middle;">文本</td> —— 简单有效

但它只对 inline / table-cell 元素起作用；如果 <td> 里塞了个 <code>div 且没设 display: inline-block，vertical-align 就失效

Flex 方案更可控，尤其当单元格内要嵌套按钮、图片、多行文本等复杂结构时

容易踩的坑

实际写的时候常掉进这几个坑：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 给 <tr> 或 <code><table> 加 <code>display: flex —— 这会破坏表格语义和渲染逻辑，导致列宽错乱、响应式失效
• 忘了给 <td> 设高度（如 <code>min-height: 40px），flex 的交叉轴没长度参考，align-items: center 就“悬空”了
• 子元素用了 align-self: flex-start，覆盖了父级 align-items
• 在 IE11 下，<td> 设 <code>display: flex 后某些嵌套元素可能高度计算异常，建议补一句 height: auto

  真正要用 align-items，就老老实实只动 <td> 自身的 display，别碰整张表的结构。否则不如直接换 Grid 或重构成 div 布局。</td>

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