首页 > 文章 > 前端

如何用css align-items控制grid单元垂直对齐

时间：2025-12-21 16:58:53 465浏览收藏

推广推荐

支持 PC / 移动端，安全直达

从现在开始，我们要努力学习啦！今天我给大家带来《如何用css align-items控制grid单元垂直对齐》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

align-items用于设置网格容器内所有项目在交叉轴上的对齐方式，取值如stretch、start、center、end可控制垂直对齐表现，通过align-self可单独覆盖某个项目的对齐方式，常用于卡片、表单、导航等布局中实现内容垂直居中或顶部/底部对齐。

如何用css align-items控制grid单元垂直对齐

在 CSS Grid 布局中，align-items 是控制网格容器内所有单元格（网格项）内容在交叉轴（通常是垂直方向）上对齐方式的关键属性。它作用于整个网格容器，影响每一个网格项的垂直对齐表现。

理解 align-items 的作用范围

align-items 设置在网格容器上，决定每个网格项在其网格区域内的垂直对齐方式。它不会改变网格轨道（track）的大小，但会影响项目在其中的定位。

常见取值包括：

stretch：默认值，项目拉伸以填满整个网格区域（排除 margin 区域）
start：项目与网格区域顶部对齐
end：项目与网格区域底部对齐
center：项目在网格区域内垂直居中

基本使用方法

将 align-items 应用于定义为 display: grid 的父容器即可：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; /* 所有子项垂直居中 */
}

.item {
  height: 100px; /* 可选：设定具体高度测试效果 */
}

此时，所有 .item 元素会在各自的网格单元格中垂直居中。

单独控制某个单元格

如果只想让某一个网格项有不同的对齐方式，可以使用 align-self 覆盖 align-items 的设置：

.container {
  display: grid;
  align-items: start;
}

.special-item {
  align-self: end; /* 单独这个项目底部对齐 */
}

这样，大部分项目顶部对齐，而 .special-item 会底部对齐。

实际应用场景

当你设计卡片布局、表单字段对齐或导航菜单时，align-items 非常实用。例如，一个两列布局，左侧文字、右侧按钮，希望按钮垂直居中：

.grid-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; /* 让文本和按钮都垂直居中 */
}

无需额外设置外边距或定位，即可实现整齐对齐。

基本上就这些。掌握 align-items 和 align-self 的配合使用，能让你更灵活地控制 Grid 布局中的垂直对齐效果，不复杂但容易忽略细节。记得测试不同内容高度下的表现，确保视觉一致性。

终于介绍完啦！小伙伴们，这篇关于《如何用css align-items控制grid单元垂直对齐》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

CSS Grid