怎样让CSS Grid网格项垂直居中-css教程-PHP中文网

align-self: center没反应，需确认父容器设display: grid、网格行有实际高度、子元素未脱离网格流；place-items: center作用于所有子项，align-self: center仅作用于单个子项且可覆盖前者。

怎样让css grid网格项垂直居中

align-self: center 没反应？先确认三件事

写了 align-self: center 却没垂直居中，大概率不是属性写错了，而是前提条件缺失：

父容器没设 display: grid 或 display: inline-grid —— 这个必须有，否则 align-self 根本不生效
子元素所在的网格行没有实际高度 —— 比如 grid-template-rows: auto 或未定义，浏览器可能把行高压缩到内容本身高度，“居中”就无视觉空间
子元素被 position: absolute、float 或 display: contents 脱离了网格流 —— 它已不算网格项，align-self 自然失效

place-items: center 和 align-self: center 的区别在哪

两者都管垂直居中，但作用范围和优先级完全不同：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

place-items: center 是容器级属性，写在 grid 父容器上，等价于同时设 justify-items: center 和 align-items: center，影响所有直接子项
align-self: center 是项目级属性，写在某个具体子元素上，只影响它自己，且会覆盖 place-items 或 align-items 对它的设置
如果只想让一个图标居中、其他文字靠左，必须用 align-self: center；如果整组按钮都要居中，用 place-items: center 更省事

跨行/跨列时 align-self 还有效吗

有效，而且是它最实用的场景之一：

哪怕用了 grid-row: span 2 或 grid-column: span 3，align-self: center 仍作用于这个合并后的逻辑单元格，而不是整个容器
例如：一个标题横跨三列，加 align-self: center 就会在三列合并出的高度内垂直居中，不是在容器总高度里居中
注意：此时对齐基准是该单元格的块轴（默认垂直方向），若你改了 grid-auto-flow: column，块轴就变成水平方向，align-self 控制的就变成“水平居中”了

为什么 margin: auto 在 Grid 里有时不管用

margin: auto 在 Grid 中的行为很特殊，容易误判：

当 align-self 是默认值 stretch 时，margin: auto 在垂直方向会被忽略 —— 因为拉伸已经占满整个格子高度
一旦把 align-self 改成 center、start 等非拉伸值，margin: auto 就能生效，常用来微调：比如 align-self: center; margin: auto 0; 实现垂直居中 + 水平由 justify-self 控制
别指望靠 margin: auto 单独实现垂直居中 —— 它只在轨道尺寸为 auto 或 fit-content 时才起作用，远不如 align-self 可靠