Grid布局中子元素居中应在父容器用place-items: center（等价于justify-items和align-items设center），或对单个子项用justify-self/align-self: center；切勿在子元素设margin: auto或混用Flex逻辑。
Grid 布局中让子元素水平
垂直居中
其实很直接，关键在于理解容器和项目的控制关系——不是在子元素上设居中，而是在父容器（grid container）上用
或组合使用
与
。
用
一步到位
这是最简洁的方式，适用于所有直接子项都需居中的情况。它等价于同时设置
（主轴居中）和
（交叉轴居中）。
只对 grid 容器生效，子元素无需额外样式
适用于单个或多个子项，每个子项都会在其网格区域中居中（注意：不是整个容器中心）
若子项跨越多行或多列（如用了
/
），它仍按自身所占网格区域居中
当需要单独控制某一个子项时，用
和
如果只有某个特定子元素要居中，其他保持默认位置，就在该子元素上设置：
—— 控制其在所在网格区域内的左右位置（主轴）
—— 控制其在所在网格区域内的上下位置（交叉轴）
这两个属性会覆盖容器级的
和
注意：别和 flex 的居中逻辑混淆
Grid 的
/
是作用于“每个网格区域内部”的对齐，不是让子项整体在容器里居中。如果想让一个子项真正居于整个 grid 容器正中心（无视网格线），更稳妥的做法是：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
给容器设
并定义单个 1×1 网格区域：
再给子项设
或者直接用
，效果一致
常见误区提醒
以下操作通常无效或不必要：
在子元素上写
—— Grid 中只有当子项是“可伸缩轨道”中的块级元素时才可能生效，不可靠
对容器设
—— 对非内联元素无用
混用 Flex 和 Grid 居中逻辑试图“叠加效果”——容易互相干扰，选一种布局模式专注处理
place-itemsjustify-itemsalign-itemsplace-items: centerjustify-items: centeralign-items: centergrid-columngrid-rowjustify-selfalign-selfjustify-self: centeralign-self: centerjustify-itemsalign-itemsjustify-itemsalign-itemsdisplay: gridgrid-template: 1fr / 1frjustify-self: center; align-self: centerplace-items: centermargin: autotext-align: center