网格容器内元素无法居中的技术问题求助

你的问题出在网格项内部的文本没有设置对齐规则：虽然.skills用了justify-items: center让网格项在单元格里水平居中，但.skills-item作为inline-block元素，其内部的标题和文本默认左对齐，这和父容器的网格/flex布局无关。

只需修改.skills-item的CSS即可解决：

.skills-item {
  display: inline-block;
  text-align: center; /* 添加这行，让内部文本水平居中 */
}

如果后续给.skills-item设置了固定高度，需要让元素同时垂直居中，可以改成flex布局：

.skills-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中，需配合高度生效 */
  text-align: center; /* 确保文本本身对齐 */
}

修改后，每个.skills-item里的标题和段落都会自动居中，外层flex容器.about的align-items: center只是让整个.skills容器在页面水平居中，和网格内部的文本对齐没有冲突。

内容的提问来源于stack exchange，提问作者ATLA Fan