使用css grid实现水平和垂直居中是现代前端开发中非常实用的技巧。通过将父容器定义为网格容器，再配合特定的对齐属性，可以让子元素在容器内两个方向上都居中，而不需要计算外边距或定位偏移。
基础实现方式
最简单的方法是给容器设置display: grid，然后使用place-items: center。该属性是align-items和justify-items的简写，能同时控制网格项在行轴和列轴上的对齐。
.container {
display: grid;
place-items: center;
height: 300px;
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 100px;
background: #409eff;
}
对应HTML结构如下，注意标签名需按规则转义说明：实际代码中应使用<div>包裹。
<div class="container"> <div class="item">内容</div> </div>
分开控制对齐属性
如果不想用简写，也可以分别设置align-content和justify-content，适用于容器本身也是网格且有多行多列的情况。
.container {
display: grid;
align-content: center;
justify-content: center;
height: 400px;
}
使用网格模板区域居中
还可以显式定义网格区域，将子元素放在唯一单元格中，再利用对齐实现居中。
.wrap {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
height: 100vh;
}
.box {
align-self: center;
justify-self: center;
}
常见注意点
- 容器必须设置明确高度，否则垂直居中看不出效果
- place-items只作用于网格项，对普通块级子元素需确认其为直接子节点
- 旧版浏览器需检查grid支持情况，一般现代项目可放心使用
css grid的居中方案比float和table布局更直观，也比flex在某些场景下更少嵌套。
小结
用css grid实现水平和垂直居中的核心就是让容器成为网格，并通过place-items: center或content类属性控制对齐。掌握这种方式能显著提升布局效率。