如何使css网格项始终居中
如何使css网格项始终居中
提问于 2018-06-15 09:06:27
我正在使用一些方框项目的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>
回答 1
Stack Overflow用户
发布于 2018-06-15 09:16:36
其实我太傻了，我已经弄明白了。它只需要在子项上使用justify-self: center;，它就起作用了！当文档谈到它时，我认为它指的是里面的flex项。然后我想，哦，等等？你不能证明不在flex中的flex父母的正当性！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50867906
复制相关文章
相似问题