CSS Grid Layout 是一个强大的前端布局工具，它可以帮助我们快速、灵活地构建网页布局，提高工作效率。而其中的垂直居中布局，更是 CSS Grid 独有的魅力所在。本文将向你介绍如何使用 CSS Grid 进行垂直居中布局。
思路分析
在传统的 CSS 布局中，我们往往需要借助 flexbox 或 position 等属性才能实现垂直居中。而在 CSS Grid 中，则更为简单明了。我们只需要将内容放置在 grid 容器中，并通过 grid-template-columns 和 grid-template-rows 属性设置网格的列和行，再采用 align-items 和 justify-items 来进行垂直和水平的居中即可。
例如，以下是一个简单的 grid 布局的 HTML 和 CSS 代码：
<div class="container"> <div class="item">Box 1</div> <div class="item">Box 2</div> <div class="item">Box 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- ------ ------------ ------- -------------- ------- - ----- - ----------------- ----- -------- ----- ----------- ------- -
以上代码设置了一个包含三个子元素的 grid 容器，其中每一列的宽度都为 1fr，即等分网格容器中的剩余空间，并将每一行的高度设置为300px。在 align-items 和 justify-items 中，我们分别设置了垂直和水平的居中对齐方式。
最终的效果如下：
实战演练
通过上述示例，我们可以了解到 CSS Grid 垂直居中布局的实现原理。接下来，我们将使用实战案例来深入学习如何运用该属性。
案例一：垂直居中单个元素
首先，我们来看一个针对单个元素的垂直居中案例。以下是我们所需的 HTML 和 CSS 代码：
<div class="container"> <div class="item">这是一段文字</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ------------ ------- - ----- - ----------------- ----- -------- ----- ----------- ------- -
在 .container 中，我们定义了一个高度为 200px 的 grid 容器，并设置了 align-items 属性为 center，让 .item 元素在垂直方向上进行居中显示。而 .item 元素本身则拥有背景色和文字居中的样式效果。
最终的效果如下：
案例二：垂直居中多个元素
接下来，我们来看如何实现多个元素的垂直居中布局。以下是我们所需的 HTML 和 CSS 代码：
<div class="container"> <div class="item">这是一个标题</div> <div class="item">这是一个子标题</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ------------ ------- -------------- ------- - ----- - ----------------- ----- -------- ----- ----------- ------- ------- ----- -
在 .container 中，我们同样设置了 align-items 属性为 center，同时在 justify-items 中添加了 center 属性，使元素在水平方向上也能够保持居中。而 .item 元素本身则叠加了 margin 属性来使视觉效果更为美观。
最终的效果如下：
案例三：使用 Grid 嵌套
此外，在实际开发中，我们也可以采用 Grid 嵌套的方式，实现区块内部垂直居中布局。以下是我们高度自由可调的 HTML 和 CSS 代码：
<div class="page">
<div class="container">
<div class="content">
<h2>这是一个标题</h2>
<p>这是一段内容</p>
</div>
</div>
</div>-- -------------------- ---- ------- ----- - ------- ------ - ---------- - -------- ----- ------- ----- ------------ ------- - -------- - ----------------- ----- -------- ----- ----------- ------- -
在该示例中，我们定义了一个 .page 元素作为整个页面的外部容器，并在其中嵌套了两个容器： .container 和 .content。通过 .page 的 height 属性，我们可以自由调整页面的高度。而 .container 容器则通过设置 height: 100% 属性，将元素完整地占据 .page 的高度，并设置了 align-items 属性来保证 .content 在垂直方向上达到居中显示效果。
最终的效果如下：
总结
以上是关于如何使用 CSS Grid 进行垂直居中布局的指南。借助 CSS Grid 布局的强大功能，垂直居中布局将不再是一个难点。使用 align-items 和 justify-items 属性，我们可以轻松实现单个或多个元素的垂直居中，甚至可以嵌套至更高级别的布局设计。
示例代码：https://codepen.io/pktang/full/NWdwRME
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646fbb0f968c7c53b0dfd644