使列居中的 CSS 网格入门

在网页布局中，常常需要将某一列内容居中显示。使用CSS网格布局可以方便地实现这一效果。

什么是 CSS 网格？

CSS网格是一种二维布局系统，允许开发者对网页进行详细的布局和定位。

在CSS网格中，将页面划分为虚拟的网格单元格，开发者可以在这些单元格中放置各种元素，实现二维布局。

基本语法

使用CSS网格，需要定义一个容器元素，以及一个或多个网格项目。

容器元素需要设置为 display: grid，以使用CSS网格布局。每个网格项目需要使用 grid-row 和 grid-column 属性设置其位置。

例如，以下代码将页面分为3列，第2列放置内容，第1列和第3列留空，并使内容居中显示：

<div class="container">
  <div class="item">Content</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-items: center;
}

.item {
  grid-row: 1;
  grid-column: 2;
}
</style>

如何使列居中？

在上面的基本语法中，使用 justify-items: center 属性可以使项目在其网格单元格内水平居中。

同时，为了使内容垂直居中，我们可以使用 align-items: center 属性，将页面容器设置为纵向对齐。

例如，以下代码将页面分为3列，第2列放置内容，第1列和第3列留空，并使内容水平和垂直居中显示：

<div class="container">
  <div class="item">Content</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
}

.item {
  grid-row: 1;
  grid-column: 2;
}
</style>

总结

使用CSS网格布局，可以简单地实现使列居中的效果。

需要注意的是，在考虑网格布局时要考虑到多种不同的浏览器，以兼容各种环境。

参考文献：

• CSS Grid Layout - CSS: Cascading Style Sheets | MDN