place-items 不能直接对齐网格内文字，因其仅控制网格项整体位置，而非项内文本排版；文字对齐需在子项上用 text-align、flex 或 line-height 等属性实现。
place-items 为什么不能直接对齐网格里的文字
place-items 控制的是**网格容器中所有直接子项（grid items）的整体对齐方式**，不是针对子项内部文本的排版。如果你给一个 div 设置了 display: grid，又在它里面放了一个 p，那 place-items: center 是把整个 p 在网格里居中，而不是把 p 里面的文字居中。
常见错误现象：place-items: center 写了但文字还是靠左、换行错位、行高塌陷——本质是混淆了“容器对齐”和“内容对齐”两个层级。
- 真正影响文字水平对齐的是子项自身的
text-align - 真正影响文字垂直对齐的是子项自身的
display类型 +align-items/justify-content或line-height/flex布局 -
place-items等价于同时设置align-items和justify-items，只作用于网格项的盒模型边界，不穿透到文本流
grid 子项内文字垂直居中的三种可靠做法
当网格项是个块级元素（比如 div 或 p），要让它内部文字真正垂直居中，得在子项上动手脚：
- 如果子项高度固定，用
line-height= 高度（仅限单行） - 如果子项是响应式或含多行，推荐设为
display: flex+align-items: center+justify-content: center - 如果不想改 display，可用
display: grid+place-items: center在子项内部再建一层网格（注意：这会覆盖子项原有布局）
示例：一个网格项需要居中显示多行文字
立即学习“前端免费学习笔记（深入）”；
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
这里 text-align: center 解决水平，justify-content 解决垂直，flex-direction: column 确保多行文本整体居中而非每行单独居中。
place-items 和 place-self 的区别与误用场景
place-items 是容器属性，批量控制所有子项；place-self 是子项属性，单独覆盖某个子项的对齐行为。很多人试图在子项上写 place-items: center，结果无效——因为这不是子项的有效属性。
- 正确写法：
.container { place-items: center; }或.item { place-self: center; } - 错误写法：
.item { place-items: center; }（浏览器直接忽略） - 兼容性注意：
place-self在旧版 Safari（-webkit- 前缀，而place-items支持更广 - 性能影响：频繁用
place-self单独设置几十个子项，不如统一用place-items+ 少量例外用align-self/justify-self
文本溢出、换行、字体度量带来的对齐偏差
即使 place-items 和子项内部对齐都设对了，文字仍可能看起来“没居中”——根源常在字体渲染细节：
- CSS 中的
height和line-height计算不包含字体的上下伸展（如字母 g、y 的下伸部，f、l 的上伸部） - 使用
font-display: optional或网络字体加载延迟时，初始回退字体可能导致高度跳变 -
white-space: nowrap配合overflow: hidden容易让文字被截断在视觉中心偏上位置 - 解决办法：对关键展示区域，用
padding微调，或用transform: translateY(-50%)配合top: 50%做像素级补偿（慎用于动态内容）
最稳妥的做法，是把文字容器明确设为 display: flex，并接受浏览器基于 cap-height 和 ex 单位的自然基线对齐逻辑——别硬抠像素，除非设计稿强制要求。
复杂点在于：你永远没法靠一个 place-items 同时搞定容器布局、子项定位、文本基线、字体加载、缩放适配这五层问题。容易被忽略的是最后一层——字体度量，它不报错，也不警告，但每次 QA 都说“这里看着偏了”。
