如何在CSS网格的最后一行居中放置元素？

如何在CSS网格的最后一行居中放置元素？

CSS Grid不适合在整行中对齐，因为纵横交错的轨道阻碍了这种方式。以下是详细说明：

或者，将flexbox与一起使用

justify-content: center

。

这会将所有项目打包在该行的水平中心。然后，您的利润将它们推开。

在完全填充的行上，

justify-content

将没有任何效果，因为没有可用空间来工作。

在具有可用空间的行（在您的情况下，仅最后一行）中，项目居中。

#container {  display: flex;  flex-wrap: wrap;  justify-content: center;}.item {  flex: 0 0 calc(16.66% - 20px);  background: teal;  color: white;  padding: 20px;  margin: 10px;}* {  box-sizing: border-box;}<div id="container">  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div></div>