在前端开发中，对于页面布局的设计，常常需要实现元素的垂直或者水平居中。而传统的实现方式通常需要使用绝对定位或者 JavaScript 来处理，这些方法虽然能够实现相应的效果，但是代码量较多，也不够优雅。
随着 CSS Grid 技术的普及，我们可以使用它轻松实现水平和垂直居中的布局，让我们的代码更简洁优美。
知识储备
在开始学习如何使用 CSS Grid 实现水平和垂直居中之前，我们需要了解以下概念：
display: grid：设置一个容器为网格布局模式。grid-template-columns和grid-template-rows：定义容器的列和行。justify-items和align-items：调整单元格在网格中的对齐方式。
同时，为了更好的理解该布局方式的实现原理，建议掌握以下内容：
- 父元素与子元素的居中方式。
- 对于元素宽度和高度计算的方法。
实现垂直居中布局
基本方式
单个元素垂直居中通常需要在父元素上设置display: grid，并使该元素垂直对齐于容器。
示例代码：
-- -------------------- ---- ------- ------- ---------- - -------- ----- ------- ------ - ----- - ------- ----- - -------- ---- ------------------ ---- ------------------------- ------
代码解释：
.container容器采用网格布局模式，并设置了高度为 100vh。margin: auto改变单元格的尺寸，实现文本的垂直居中
效果演示：
多元素垂直居中
当需要为多个元素进行垂直居中时，可以把它们包装在一个容器内，再将容器利用 CSS Grid 的特性垂直居中即可。
示例代码：
-- -------------------- ---- ------- ------- ---------- - -------- ----- ------- ------ ------------ ------- - ----- - ------- ----- - -------- ---- ------------------ ---- ------------------------- ---- -------------------------- ---- -------------------------- ------
代码解释：
.container容器采用网格布局模式，并设置了高度为 100vh。align-items: center垂直居中所有子元素。
效果演示：
实现水平居中布局
基本方式
单个元素的水平居中需要在父元素上设置display: grid， 并把该元素放置到容器的中心，这样就实现了元素的水平居中。
示例代码：
-- -------------------- ---- ------- ------- ---------- - -------- ----- ------- ------ - ----- - ------- ----- ------------- ------- - -------- ---- ------------------ ---- ------------------------- ------
代码解释：
.container容器采用网格布局模式，并设置了高度为 100vh。justify-self: center让单元格内部的元素水平居中。
效果演示：
多元素水平居中
当需要为多个元素进行水平居中时，可以把它们包装在一个容器内，再将容器利用 CSS Grid 的特性水平居中即可。
示例代码：
-- -------------------- ---- ------- ------- ---------- - -------- ----- ------- ------ ---------------- ------- - ----- - ------- ----- ----------- ------- - -------- ---- ------------------ ---- ------------------------- ---- -------------------------- ---- -------------------------- ------
代码解释：
.container容器采用网格布局模式，并设置了高度为 100vh。justify-content: center水平居中所有子元素。
效果演示：
总结
使用 CSS Grid 实现水平和垂直居中的布局，简洁而优雅。我们只需要掌握一些基础的 CSS 知识，就能够轻松实现这个常用的布局方式。希望本文对您在前端开发中的实际工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464f339968c7c53b05c9ebb