在CSS Grid布局中，让子元素垂直居中是一个高频需求。Grid规范提供了一套对齐属性，其中容器级的place-items可以快速统一所有网格项的对齐方式，而项目级的align-self则允许单个元素脱离容器设定。理解这两者的作用层级与覆盖关系，是写出灵活网格布局的关键。
一、Grid对齐模型基础
CSS Grid中的对齐分为两个轴：块轴（block axis，通常对应垂直方向）和行内轴（inline axis，通常对应水平方向）。在容器上，我们使用align-items控制块轴对齐，justify-items控制行内轴对齐。这两个属性决定了每个网格项在其网格区域中的默认摆放位置。
如果容器没有显式设置对齐属性，初始值为stretch，也就是子项会拉伸填满网格区域，这往往导致内容贴顶而非居中。只有将对齐方式改为center，子项才会在对应轴上收缩为自身尺寸并居中。Grid的对齐发生在网格轨道尺寸确定之后，因此即使轨道占满整行，项目依然可以通过对齐属性在轨道内移动。
二、place-items的全局居中能力
place-items是align-items和justify-items的简写属性。只写一条place-items: center;，就能让容器内所有网格项在垂直和水平方向同时居中。这种方式适合布局统一、子项对齐规则一致的场景，代码量最少且语义清晰。
下面是一段基础示例，容器高度为300px，内部两个div自动垂直水平居中：
.container {
display: grid;
height: 300px;
place-items: center; /* 等价于 align-items:center; justify-items:center */
border: 1px solid #ccc;
}
.item {
padding: 10px 20px;
background: #eef;
}
对应的HTML结构非常简单，不需要给每个子项加额外类：
<div class="container"> <div class="item">元素A</div> <div class="item">元素B</div> </div>
这种写法的优点是维护成本低，但如果后续某个元素需要特殊对齐，比如靠下显示，就必须在项目自身上覆盖规则，这就引出了align-self。
三、align-self的单项目覆盖
align-self用在网格项上，用于控制该单项在块轴上的对齐，可取值与align-items相同，如start、end、center、stretch。当容器已经通过place-items:center统一居中后，某个子项写align-self: end;就会脱离居中，改为贴底。这种层级覆盖符合CSS的“项目属性优先于容器属性”原则。
示例中将第二个元素单独靠下，其余保持居中：
.container {
display: grid;
height: 300px;
place-items: center;
}
.item-bottom {
align-self: end; /* 仅该项目垂直贴底 */
padding: 10px;
background: #fee;
}
<div class="container"> <div>正常居中</div> <div class="item-bottom">靠底显示</div> </div>
从浏览器渲染逻辑看，align-self是在计算完容器对齐基线后，再对单个网格项重算位置，因此不会破坏其他项的布局。需要注意的是，如果项目设置了stretch且自身有明确高度，stretch会被高度限制，此时center和start的差异才明显。
四、place-items与align-self结合实践
实际项目中常见这样的界面：顶部标题区、中间主体内容居中、底部操作栏贴底。用Grid一行容器配合place-items:center加个别align-self调整，就能避免嵌套flex。下面的代码构建一个三行网格，主体居中，按钮贴底：
.card {
display: grid;
grid-template-rows: auto 1fr auto;
height: 400px;
place-items: center; /* 默认全部居中 */
border: 1px solid #333;
}
.card .footer {
align-self: end; /* 底部区域贴底 */
margin-bottom: 12px;
}
<div class="card"> <h3>标题</h3> <p>这是居中展示的主体内容</p> <div class="footer"><button>确认</button></div> </div>
这种结合方式的优势在于：布局意图一目了然，全局规则负责大部分元素，局部例外用align-self表达，不需要额外包装层。相比之下，纯用flex可能要在不同区域套不同容器，DOM更深。
从兼容性看，place-items在现代浏览器均已支持，但在极旧环境可拆成align-items与justify-items分开写。若团队仍要照顾老内核，建议用展开写法并配合align-self做覆盖，逻辑完全一致。
五、常见误区与排查
很多开发者发现写了place-items:center却没效果，多半是因为容器本身没有确定高度，或者网格项被设为stretch且充满整行。此时应检查容器height或grid-template-rows是否给了明确尺寸，以及子项是否意外继承了align-self:stretch。
另一个误区是混淆align-self与justify-self：前者管垂直，后者管水平。若只想水平偏移，应使用justify-self。下方表格列出常用对齐属性层级：
| 属性 | 作用对象 | 控制轴 |
|---|---|---|
| place-items | 容器 | 块轴+行内轴 |
| align-items | 容器 | 块轴（垂直） |
| align-self | 网格项 | 块轴（垂直） |
| justify-self | 网格项 | 行内轴（水平） |
排查时建议先用开发者工具选中容器，确认place-items计算值；再选中异常子项，看align-self是否被其他样式覆盖。通过层级梳理，Grid垂直居中问题通常能快速定位。
CSS_Gridplace-itemsalign-self修改时间：2026-08-08 20:36:15