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

Posted 2023-03-05

【中文标题】如何使css网格项目始终居中[重复]

【英文标题】：How to make css grid items always center [duplicate]

【发布时间】：2018-11-24 20:18:48

【问题描述】：

我正在为一些盒子项目使用 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>

【问题讨论】：

听起来您想使用display: flex 而不是grid。

不，我通常会这样，但其中一些“项目”将占用两个列槽，因为设计师是这样说的。所以网格是必要的。我想我应该提到这一点。

【参考方案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>

【讨论】：

比我的答案更好！

【参考方案2】：

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

【讨论】：

justify-self: center 如何解决？这使项目在其列中居中，而不是在整行中。 ***.com/a/50239093/3597276