Html 如何使用水平中心栅格元素

我有12个柱网。它是为一般目的而写的。在这里，我只有一个元素作为子元素，它占据了6列。我可以垂直对齐。但不是中心对齐。怎么做

不修改网格系统有什么办法吗？请帮帮我

.container{
显示：网格；
网格模板列：重复（12,1fr）；
证明内容：中心；
对齐内容：居中对齐；
高度：150像素；
边框：1px纯蓝色；
}
.货柜组{
边框：1px纯红；
格构柱：跨度6；
}

1.

您可以在下面的类中添加文本对齐：居中

.container div {
  border: 1px solid red;
  grid-column: span 6;
  text-align: center;
}

---

网格区域是

行开始/列开始/行结束/列结束的组合，您可以这样使用它：

.container div {
  border: 1px solid red;
  /*grid-column: span 6;*/
  grid-column-start: 4;
  grid-column-end: 10;
}


.container{
显示：网格；
网格模板列：重复（12,1fr）；
证明内容：中心；
对齐内容：居中对齐；
高度：150像素；
边框：1px纯蓝色；
}
.货柜组{
边框：1px纯红；
网格面积：1/4/1/10；
}

1.
添加规则
网格列开始
和
网格列结束
，并从
.container div
中删除
网格列：span 6
。在您的情况下，它应该如下所示：

.container div {
  border: 1px solid red;
  /*grid-column: span 6;*/
  grid-column-start: 4;
  grid-column-end: 10;
}


.container{
显示：网格；
网格模板列：重复（12,1fr）；
证明内容：中心；
对齐内容：居中对齐；
高度：150像素；
边框：1px纯蓝色；
}
.货柜组{
边框：1px纯红；
/*格构柱：跨度6*/
网格列开始：4；
网格柱端：10；
}

1.
我完全同意你的看法。有时我有3个元素，有时有2个。除了人工计算外，还有其他通用方法吗。因为样式表与许多人共享。。