place-items失效的头号原因是父容器未设display: grid或inline-grid；它只对grid容器的直接子元素生效，若父容器为block、flex等布局，或子元素被嵌套、脱离文档流、自设align-self等，均会导致该属性无效。
父容器根本不是Grid容器
这是place-items失效的头号原因。它只对display: grid或display: inline-grid的元素生效，写在普通div上等于白写——浏览器不报错，但computed styles里根本看不到该属性起作用。
检查方式：打开开发者工具，选中目标父元素，看Computed面板里的display值。如果是block、flex或inline，那place-items就完全被忽略。
- React/Vue中常见于用
Fragment或多余div包裹子元素，导致目标节点不是直接子代 - Tailwind用户常漏掉
grid类（比如只写place-items-center，没加grid或grid-cols-1） - CSS里写了
place-items: center但忘了配display: grid，或者被其他规则覆盖（如reset.css强制设为display: block !important）
子元素不是直接子代或已脱离网格流
place-items只影响网格容器的**直接子元素**（grid items），中间多一层包装，它就管不到。
更隐蔽的是：子元素若设了position: absolute、float或display: contents，会脱离网格格式化上下文，即使它是直接子代，place-items也对其无效。
- Vue里用
<template></template>包裹内容，实际渲染后产生不可见父节点 - React中用
>Fragment，某些版本仍会插入占位节点 - 子元素自己写了
align-self: start或place-self: start，会覆盖place-items的设置
容器高度塌陷或缺乏明确尺寸
place-items: center需要可用空间才能“居中”。如果父容器高度是0px（比如没设height、min-height，且子元素又没撑高），那垂直方向根本无从对齐。
临时验证方法：给父容器加background: #f0f，看色块是否铺满你预期的区域——这是最快定位塌陷的方式。
- 全屏场景优先用
min-height: 100vh，比height: 100vh更安全（避免iOS键盘弹出时视口突变） - 嵌套布局中，确保
html和body有height: 100%或min-height: 100%，否则内层Grid容器可能继承不到高度 - Flex或Grid父容器若设了
overflow: hidden或flex: 0 0 auto，也可能截断高度传递
place-items vs place-content 混用或误判
这两个属性作用对象完全不同，但名字太像，导致高频翻车：
-
place-items: center控制每个子元素在**各自分配到的网格单元格内**如何对齐（适合单个按钮、图标等） -
place-content: center控制**整套网格轨道（rows/columns）在容器内的位置**（适合3×3图标网格整体居中） - 只有一行一列且没显式定义
grid-template-rows/grid-template-columns时，place-content基本无效——因为没“轨道间隙”可分配 - 想精准控制单个子项？别用
place-items，直接给它加place-self: center，或拆成justify-self: center+align-self: center
真正卡住人的地方，往往不在语法写错，而在「谁是容器」「谁是子项」「谁在继承谁」这三层关系没理清。尤其在复杂嵌套或框架组件中，DOM结构和CSS作用域容易错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
