这两种网格居中对齐内框的CSS有什么区别[重复]

Question

我已经使用 CSS 网格编写了两个片段来居中对齐内框，但无法理解其中的区别。

我知道我们还有其他方法可以做，但很想知道这两者之间的确切区别。

哪一个更合适/正确，为什么

第一

justify-content: center;
align-content: center;

第二个

justify-items: center;
align-items: center;

HTML

<div class="box1">
  <div>Box1</div>
</div>
<div class="box2">
 <div>Box2</div>
</div>

CSS

 .box1, .box2 {
  border: 5px solid lightgreen;
  height: 250px;
  width: 250px;
  display: grid;
  justify-content: center;
  align-content: center;
  margin: 5px;
}
.box2 {
  display: grid;
  justify-items: center;
  align-items: center;
}
.box1>div, .box2>div {
  background: lightgreen;
  padding: 20px;
}

输出

Answer 1

在您的示例中，没有真正的区别，因为每个示例中只有一个网格项。但这些实际上有不同的目的。

justify-content

和

align-content

用于将网格容器的全部内容作为一个组进行对齐。因此，在下面的第一个示例中，所有四个框都位于黑色容器的中心。

justify-items

和

align-items

用于对齐各个网格单元内的各个网格项。因此，在下面的第二个示例中，每个黄色方块都在其自己的四分之一容器内居中。

当容器中只有一个 div 时，两组属性的结果相同，但原因不同。

article.content {
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  justify-content: center;
  align-content: center;
}

article.items {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

article {
  display: grid;
  background: black;
  width: 400px;
  height: 400px;
  gap: 20px;
}

div {
  background: yellow;
  width: 100px;
  height: 100px;
}

<h1>justify-content and justify-items</h1>

<article class="content">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</article>

<h1>justify-items and align-items</h1>

<article class="items">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</article>