通过 align-items 和 justify-items 可实现网格项在单元格内的居中对齐：align-items: center 实现垂直居中，justify-items: center 实现水平居中，二者结合可使元素完全居中，且作用于所有子项，单独控制则可用 align-self 或 justify-self 覆盖。
在使用 CSS Grid 布局时，让网格内的元素居中对齐是一个常见需求。可以通过 align-items 和 justify-items 两个属性分别控制交叉轴和主轴方向上的对齐方式。
这个属性作用于网格容器，用于设置所有网格项在列轴（block axis），也就是垂直方向上的对齐方式。
当设置为 center 时，每个网格项会在其所在的网格区域中垂直居中。示例：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center; /* 垂直居中 */
height: 400px;
}
该属性控制网格项在行轴（inline axis），即水平方向上的对齐。
立即学习“前端免费学习笔记（深入）”；
设置为 center 后，每个网格项会在其网格区域内左右居中。示例：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center; /* 水平居中 */
}
若希望网格项在其单元格内完全居中（即水平垂直都居中），可以同时设置两个属性：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
height: 100vh;
}
注意：align-items 和 justify-items 是作用于所有网格项的统一对齐方式。如果需要单独控制某个网格项，可使用 align-self 或 justify-self 在具体项目上覆盖。
基本上就这些。合理使用这两个属性，可以让 Grid 布局中的内容对齐更直观、简洁。
以上就是CSS Grid如何实现元素居中对齐_align-items center与justify-items center的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
749
收藏
