如何使css网格项目始终居中[重复]

Question

我正在为一些盒子项目使用 CSS 网格。这看起来很好，但是当我在容器中只有 2 或 1 个盒子的情况下缩小屏幕时，我将如何让它们始终位于中心？

body {
  background-color: #8268EE; 
}

.item-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;
  align-items: center;
}

.item {
  background-color: #BDD3FB;
  width: 200px;
  height: 200px;
}

<div class='item-container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Answer 1

差不多了，使用justify-items 属性 而不是justify-content：

body {
  background-color: #8268EE; 
}

.item-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: center;
  justify-items: center;
}

.item {
  background-color: #BDD3FB;
  width: 200px;
  height: 200px;
}

<div class='item-container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Answer 2

其实我很傻，我已经想通了。只需在子项目上使用justify-self: center;，它就可以工作了！当文档谈论它时，我曾想过它指的是里面的 flex 项目。那我虽然哦等等？你不能证明自己是一个不在 flex 中的 flex 父级！