如何使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

其实我很傻，我已经明白了。它所需要的只是证明自我：中心 在子项上，它成功了！当文档谈到它时，我认为它指的是里面的flex项。那我想哦，等等？你不能证明自己是一个不在flex中的flex家长！

Answer 2

几乎在那里，使用证明-项目属性而不是证明-内容：

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;
}

html lang-html prettyprint-override"><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>