CSS Grid如何控制表格内容对齐_align-items与justify-items配合

align-items 和 justify-items 分别控制网格项在列轴和行轴的对齐方式，前者处理垂直对齐，后者处理水平对齐；常用值包括 start、end、center 和 stretch，默认为 stretch；通过同时设置 align-items: center 和 justify-items: center 可实现网格内容在单元格内完全居中；两者作用于网格容器，影响所有子项，若需单独控制可用 align-self 或 justify-self 覆盖；适用于表格类布局，如数据面板或卡片网格，能统一对齐样式，提升整体美观性。

CSS Grid 布局中，align-items 和 justify-items 是控制网格区域内子元素对齐方式的关键属性。它们分别处理交叉轴（列方向）和主轴（行方向）的对齐，配合使用可以精确控制表格内容的位置。

align-items：控制垂直对齐（沿列轴）

该属性作用于网格容器，定义所有网格项在单元格内的垂直对齐方式。

• start：顶部对齐
• end：底部对齐
• center：居中对齐
• stretch：拉伸填满整个单元格（默认值）

例如，让所有单元格内容垂直居中：

grid-container {
  align-items: center;
}

justify-items：控制水平对齐（沿行轴）

该属性定义网格项在单元格内的水平对齐方式。

立即学习“前端免费学习笔记（深入）”；

• start：左对齐
• end：右对齐
• center：水平居中
• stretch：横向拉伸（默认）

设置所有内容水平居中：

新CG儿

数字视觉分享平台 | AE模板_视频素材

412

查看详情

grid-container {
  justify-items: center;
}

两者结合：实现单元格内完全居中

当需要表格中的内容在每个格子中都居中显示时，同时设置两个属性即可：

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;     /* 垂直居中 */
  justify-items: center;   /* 水平居中 */
}

此时，所有直接子元素都会在其对应的网格区域中居中对齐。

注意点与适用场景

这两个属性适用于网格容器，影响所有子项。如果某个子项需要单独控制，可使用 align-self 或 justify-self 覆盖全局设置。

在类似表格的布局中，比如数据展示面板或卡片网格，使用 align-items 和 justify-items 能快速统一内容对齐风格，避免为每个项目单独设置样式。

基本上就这些，合理搭配能让网格布局更整洁美观。

以上就是CSS Grid如何控制表格内容对齐_align-items与justify-items配合的详细内容，更多请关注php中文网其它相关文章！