移动端优先网站中嵌套Grid元素居中问题求助

看起来你遇到的核心问题是：.project_prev 上的 justify-self: center 没生效，这是因为它的父元素 #projects_blk 并不是一个Grid容器——justify-self 是Grid子元素的专属属性，只有当父元素是Grid布局时，这个属性才能发挥作用。

下面给你两种简单的解决方法，任选其一就行：

方案一：把父容器 #projects_blk 改成Grid布局 #

直接给 #projects_blk 添加Grid相关样式，这样它的子元素就能用Grid对齐属性了：

#projects_blk {
  grid-row: 5/6;
  grid-column: 1/2;
  padding-bottom: 35px;
  /* 新增以下两行 */
  display: grid;
  justify-content: center; /* 或者用 place-items: center; 也能实现居中 */
}

设置后 .project_prev 上的 justify-self: center 可以保留，不过因为父容器已经做了居中设置，删掉也不会影响效果。

方案二：用margin实现居中（更简单，适合已有固定宽度的元素） #

因为你的 .project_prev 已经设置了固定宽度 width: 350px，直接给它添加自动左右margin就能实现块级元素居中：

.project_prev {
  /* 可以删掉无效的 justify-self: center; */
  width: 350px;
  display: grid;
  grid-template-rows: 60px 140px;
  border-radius: 10px;
  margin-top: 35px;
  /* 新增以下一行，也可以简写为 margin: 35px auto 0; */
  margin-left: auto;
  margin-right: auto;
  border: 2px solid var(--text-color);
  text-decoration: none;
}

这种方法不需要修改父元素的布局，对于有固定宽度的块级元素非常实用，也契合移动端优先的开发思路。

另外提个小细节：你的JS里切换 #more_blk 的显示状态用的是inline-block，但它本身是section标签，建议换成block，语义上更贴合区块元素的属性，也能避免行内元素带来的额外间隙问题。

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