CSS网格对齐技巧：justify-items与align-items全解析

CSS网格布局中子元素对齐不准？其实只需掌握justify-items（控制水平对齐）和align-items（控制垂直对齐）这两个核心属性——它们默认将子元素拉伸填满单元格，但通过设置start、end、center等值，就能轻松实现精准居中、靠边等效果；关键前提是父容器必须声明display: grid，而针对个别元素的特殊对齐需求，还可灵活使用justify-self和align-self进行覆盖，简单高效又不易出错。

当CSS网格布局中的子元素对齐不准时，通常是因为没有正确设置网格容器的对齐方式。通过使用 justify-items 和 align-items 属性，可以精确控制子元素在网格单元格内的水平和垂直对齐。

理解 justify-items 和 align-items 的作用

justify-items 控制子元素在网格单元格内的水平对齐（沿行轴方向），而 align-items 控制垂直对齐（沿列轴方向）。

• start：对齐到起始边
• end：对齐到结束边
• center：居中对齐
• stretch：拉伸以填满整个单元格（默认值）

在网格容器上设置对齐方式

确保你在定义网格的父元素（即网格容器）上应用这两个属性。

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

这样，所有直接子元素都会在各自的网格单元格中居中显示。

针对个别子元素调整对齐

如果只想调整某个子元素，可以使用 justify-self 或 align-self 覆盖容器的统一设置。

.item-special {
  justify-self: start;
  align-self: end;
}

这个特定子元素将左对齐、底部对齐，不受容器 justify-items 或 align-items 影响。

检查是否遗漏 display: grid

确保父容器设置了 display: grid，否则 justify-items 和 align-items 不会生效。这一点容易被忽略，尤其是从 Flexbox 切换过来时。

基本上就这些。只要确认容器是网格布局，并正确设置对齐属性，子元素的位置问题大多能解决。不复杂但容易忽略细节。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~