place-items 能一键居中是因为它是 justify-items 和 align-items 的合并简写，对 grid 直接子项同时设置水平垂直对齐；需满足三前提：父容器 display: grid、子元素为直接子代、未被 place-self 等覆盖。
place-items 为什么能一键居中
因为
是
和
的合并简写，对 grid 容器内的所有直接子项同时设置水平+垂直对齐方式。只要父容器是 grid 布局，且子元素是 grid item（即直接子代），
就能真正“一锤定音”——不用算 margin，不依赖 transform，也不用设 height。
必须满足的三个前提条件
父容器要显式声明
（仅
也行，但行为一致）
居中的盒子必须是父容器的**直接子元素**；嵌套一层就失效
不能同时设置了
或单独的
/
覆盖掉继承值
常见翻车现场：
外层套了
或用了
（React），结果居中的是空容器，真盒子卡在左上角。
和 flex justify-content + align-items 的关键区别
flex 的居中依赖主轴/交叉轴方向，而 grid 的
**完全无视子项的 grid-area、span 或轨道尺寸**，它只管“把内容盒的对齐框塞进其所在网格单元的中心”。这意味着：
如果子项设置了
占满整行，
仍会让它水平居中（不是靠左贴边）
如果父容器只有 1 行 1 列轨道，子项又没设
/
，它默认落在 (1,1)，此时
等效于“单元格内居中”
flex 在单行文本或图片上容易因
或
漂移；grid 不吃这套，更稳定
兼容性与降级建议
在 Chrome 57+/Firefox 45+/Safari 10.1+ 均支持，IE 完全不认。如果必须兼容旧浏览器：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
别用
降级为
+
——IE 连这两个都不支持
老项目稳妥做法：父容器加
+
+
，再用
覆盖
注意 Safari 10.0 和 10.1 对
的解析有细微差异，建议锁死到 10.1+
真正容易被忽略的是：当父容器设置了
且子项用
指定了区域时，
依然生效，但它居中的是该区域内的内容盒，不是整个区域本身——这点和很多人直觉相反。
place-itemsjustify-itemsalign-itemsplace-items: centerdisplay: gridinline-gridplace-selfjustify-selfalign-selfdivsectionFragmentplace-itemsgrid-column: 1 / -1place-items: centergrid-rowgrid-columnplace-items: centerwhite-spacevertical-alignplace-itemsplace-itemsjustify-itemsalign-itemsdisplay: flexjustify-content: centeralign-items: center@supports (display: grid)place-items: centergrid-template-areasgrid-areaplace-items