使用 align-items 和 justify-items 可控制 CSS Grid 中文字对齐：align-items 调整垂直对齐（如 center 居中），justify-items 控制水平对齐（如 start 左对齐）；两者结合可实现单元格内文字精准定位，适用于统一网格项内容布局。
在使用 CSS Grid 布局时，控制网格内文字或内容的对齐方式主要依赖 align-items 和 justify-items 两个属性。它们作用于网格容器（grid container），用来设置所有网格项（grid items）在交叉轴和主轴上的对齐行为。
align-items：控制垂直对齐（行轴方向）
align-items 决定网格项在其单元格中的垂直对齐方式，适用于块级方向（即行的交叉轴）。常见取值包括：
- start：对齐到单元格顶部
- end：对齐到底部
- center：垂直居中
- stretch：拉伸以填满整个单元格（默认值）
例如，让所有项目在单元格中垂直居中：
grid-container {align-items: center;
}
justify-items：控制水平对齐（列轴方向）
justify-items 控制网格项在单元格内的水平对齐方式，即在列的主轴方向上的位置。常用值有：
立即学习“前端免费学习笔记（深入）”；
- start：靠左对齐
- end：靠右对齐
- center：水平居中
- stretch：拉伸填充整个宽度（默认）
例如，使所有项目在单元格中水平居中：
justify-items: center;
}
组合应用：精确控制文字位置
当同时设置 align-items 和 justify-items，可以实现文字在网格单元格中的精准定位。比如：
grid-container {display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
}
此时每个网格项内的文字都会在单元格中完全居中（水平+垂直）。
如果希望文字左对齐但垂直居中：
justify-items: start;align-items: center;
这种组合灵活适配卡片布局、导航菜单或数据表格等场景。
注意点与适用范围
- 这两个属性作用于容器，影响所有子项；若需单独控制某个项目，应使用 align-self 或 justify-self
- 对纯文本内容有效，前提是父元素是网格项且具有明确尺寸或可计算空间
- 当
justify-items: stretch时，文字通常会因容器拉伸而自然换行填充，可能影响视觉对齐效果
基本上就这些，合理搭配 align-items 与 justify-items 能快速统一网格内文字的排布风格。
