如何解决CSS Grid中justify-content:center无法实现网格项水平居中的问题

嘿，我来帮你搞定这个网格居中的问题！你说用了justify-content:center没效果，其实是因为你的网格列设置和元素布局的逻辑问题，我给你拆解一下：

问题根源 #

你的.grid容器用了repeat(auto-fill, minmax(200px, 1fr))，这个写法会让浏览器尽可能生成宽度≥200px的列，多余空间会平均分给每一列，导致整个网格填满容器宽度，justify-content:center自然起不到作用。另外，你的.card是display:inline-block，它只会占据自身内容的宽度，在网格单元格里默认左对齐，这就是视觉上没居中的核心原因。

解决方案 #

这里有几个简单的修改方向，你可以根据需求选择：

方案1：让网格项在单元格内水平居中

给.grid容器添加justify-items: center，这个属性会让所有网格项在各自的单元格里自动水平居中：

.grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
  grid-gap: calc(2em + 2vh) calc(1.5em + 1vmin); 
  grid-auto-flow: row dense;
  justify-items: center; /* 新增这行代码 */
}

方案2：修改.card样式实现居中

把.card的display: inline-block改成block，再加上margin: 0 auto，让卡片自身在单元格里居中：

.card { 
  display: block; /* 替换原来的inline-block */
  margin: 0 auto; /* 新增这行 */
}

方案3：让整个网格在容器里居中（可选）

如果你希望当屏幕足够大、列数不多时，整个网格块在容器中间而非填满宽度，可以把auto-fill改成auto-fit，再配合justify-content:center：

.grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 替换auto-fill */
  grid-gap: calc(2em + 2vh) calc(1.5em + 1vmin); 
  grid-auto-flow: row dense;
  justify-content: center; /* 现在这个属性会生效 */
}

修改后的完整代码参考 #

以方案1为例，修改后的CSS代码：

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: calc(2em + 2vh) calc(1.5em + 1vmin); grid-auto-flow: row dense; justify-items: center; }
.card__image { display: block; max-width: 60%; margin: auto; }
.card { display: inline-block; }
/* ==== Styles Related to the callout ==== */
.grid .card:nth-child(14) { grid-column: -1; grid-row: span 2; align-self: center; }
@media (min-width: 712px) { .grid .card:nth-child(14) { grid-column: -1; } }
.grid .card:nth-child(14) .card__image { margin: 0 auto; object-fit: cover; }
@media (min-width: 712px) { .grid .card:nth-child(14) .card__image { height: 100%; } }
/* ==== Additional Styles not related to grid layout ==== */
.container { display: grid; grid-template-columns: minmax(1em, 1fr) minmax(min-content, 1200px) minmax(1em, 1fr); grid-template-areas: "l-gutter heading r-gutter" "l-gutter content r-gutter"; grid-row-gap: 1em; }
.grid { grid-area: content; background-color: #b96517; margin: 200px 3% 2em 3%; list-style-type: none; border: double 10px white; padding: 2%; }
.card__link { text-align: center; color: inherit; text-decoration: none; }
.card__link:hover { color: #2d2d2d; }
.card__link:hover .card__image { transform: scale(1.04); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%); }
.card__link:hover .card__text { transform: rotate(2deg) translate3d(3%, 1%, 0) scale(1.02); }
.card__link:hover .card__price { transform: rotate(-2deg) translate3d(-3%, -1%, 0) scale(1.02); }
.card__image { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%); transition: transform 200ms ease-out, clip-path 200ms ease-out; background-color: white; border-radius: 50%; }
.card__text { padding: 1em 0 0.5em; font-weight: 400; color: white; transition: transform 300ms ease-out; }

HTML代码保持不变：

<ul class="grid">
 <li class="card">
 <a class="card__link" href="#">
 <img class="card__image" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Red_Color.jpg" />
 <div class="card__text">red</div>
 </a>
 </li>
 <li class="card">
 <a class="card__link" href="#">
 <img class="card__image" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Red_Color.jpg" />
 <div class="card__text">red</div>
 </a>
 </li>
 <li class="card">
 <a class="card__link" href="#">
 <img class="card__image" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Red_Color.jpg" />
 <div class="card__text">red</div>
 </a>
 </li>
</ul>

内容的提问来源于stack exchange，提问作者Joseph Van den Avont