place-items 在 td 中无效,因为 td 默认 display 为table-cell,而 place-items 仅对 grid/inline-grid 容器生效;可靠居中方案包括 text-align+vertical-align、设 td 为 flex 容器或嵌套 div 使用 place-items。

表格单元格(<td> 或 <code><th>)默认不支持 <code>place-items,因为它不是 Flex 或 Grid 容器——直接在 td 上写 place-items: center 不生效。
为什么 place-items 在 td 里无效
place-items 是 css Grid 的属性,只对 display: grid 或 display: inline-grid 的容器起作用。而 <td> 默认是 <code>display: table-cell,既不是 Grid 也不是 Flex 容器,所以忽略该声明。
真正有效的居中方案
要让内容在单元格内水平 +垂直居中,推荐以下几种可靠方式:
- 用 text-align + vertical-align(最轻量、兼容性最好):
td {text-align: center; vertical-align: middle;}
适用于纯文本、图片、行内元素等常见内容,无需改 html 结构。 - 把 td 变成 Flex 容器(推荐现代项目):
td {display: flex; justify-content: center; align-items: center;}
注意:这会覆盖table-cell行为,但只要不破坏表格语义(如仍用<table> 结构),视觉和可访问性通常不受影响。<li> <strong> 嵌套一层 div 并设为 Grid/Flex(最可控)</strong>:<br><code><td><div class="centered"> 内容 </div></td>.centered {display: grid; place-items: center;}
适合复杂子元素(如多行文字 + 图标 + 按钮),避免样式污染父级表格布局。
如果坚持用 place-items,必须先改 display
若你确实想用 place-items,需显式将单元格设为 Grid 容器:
td {display: grid; place-items: center;}
⚠️ 注意:这会让 td 失去 table-cell 的自动宽高适应能力(比如不再随内容撑开、可能影响列宽计算),实际项目中需测试表格整体表现。
不复杂但容易忽略:居中不是靠“加一个神奇属性”,而是看容器的 display 类型是否匹配对应布局模型。