place-items: center 必须配合 display: grid 才生效，父容器未设 grid 布局则无效；需搭配 min-height: 100vh 确保高度足够，单元素居中用 place-items，多元素需 justify-content 或 align-content；兼容 ie11 需降级为 flexbox 或绝对定位。
place-items: center 必须配合 display: grid
直接写 place-items: center 却没效果，90% 是因为父容器没设 display: grid。Grid 的所有对齐属性只对真正启用 Grid 布局的容器生效，div 默认是普通块级元素，加了 place-items 也白搭。
必须同时写：
<div style="display: grid; place-items: center; min-height: 100vh;"> <button>确定</button> </div>
-
min-height: 100vh很关键：如果父容器高度是auto，它会被按钮内容撑开，视觉上就“贴顶”，不是居中 - 不要用
height: 100%代替min-height: 100vh，除非你已确保html和body都设了height: 100% -
place-items: center等价于justify-items: center; align-items: center，它控制的是子元素在各自网格区域里的对齐，不是整个网格的定位
单个按钮时 place-items 足够，多个按钮要区分场景
如果你只放一个 <button></button>，place-items: center 就能把它稳稳托在容器正中心；但放多个按钮时，行为会变：
- 默认情况下，多个按钮会按行排列（
grid-auto-flow: row），place-items: center只让每个按钮在自己的隐式网格单元格里居中，整体仍从左到右、从上到下排布 - 想让多个按钮整体水平居中（比如三按钮并排居中），要用
justify-content: center，而不是place-items - 想让多行按钮整体垂直居中（比如两行按钮在高容器里居中），得用
align-content: center
例如三按钮水平居中：
<div style="display: grid; justify-content: center; gap: 8px;"> <button>取消</button> <button>重置</button> <button>提交</button> </div>
按钮本身宽高不确定时，place-items 依然可靠
按钮内容动态变化（比如文字长度不同、图标+文字组合）、或用了 font-size 响应式缩放，都不影响 place-items: center 的居中效果——它不依赖按钮尺寸，也不需要你知道它的宽高。
- 对比
transform: translateY(-50%)：后者要求按钮有明确高度，且容易因line-height或padding计算偏差而偏移 - 对比
line-height+vertical-align: middle：只对单行文本有效，按钮内含图标或换行就失效 -
place-items对<button></button>、<img>、<svg></svg>一视同仁，无需额外 hack
IE11 不支持 place-items，降级方案要提前准备
place-items 在 IE11 及更老浏览器中完全无效，连 display: grid 都不被识别。如果项目必须兼容 IE11，不能只靠 Grid 居中。
- 最稳妥的降级是 Flexbox：
display: flex; justify-content: center; align-items: center - 如果父容器高度固定，可用绝对定位：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 避免混合使用
place-items和align-items/justify-items，它们作用域重叠，容易互相覆盖，调试时难定位
真正麻烦的不是写法本身，而是忘记检查父容器是否真成了 Grid 上下文——那个 display: grid 往往被其他样式覆盖或遗漏，一眼扫过去根本看不出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
