Html 将栅格子对象居中而不考虑其宽度

我有一个CSS网格容器，其中有3个子容器，它们的宽度都不同。我希望两边的孩子在容器的两边，中间的孩子在中心

我尝试将第一个设置为

justify self:start

，中间一个设置为

justify self:center，以及最后一个
自我证明：结束，但它并没有居中，它只是将空间平均分割


.container{
显示：网格；
网格模板列：自动；
高度：100px；
}
.首先{
自我辩护：开始；
背景色：红色；
宽度：50px；
}
.中{
自我辩护：中心；
背景颜色：绿色；
宽度：70px；
}
.最后{
自我辩护：结束；
背景颜色：蓝色；
宽度：200px；
}

居中
您可以使用网格作为外部元素，使用绝对位置和变换将中间元素居中，如下所示：


.container{
显示：网格；
网格模板列：自动；
高度：100px；
位置：相对位置；
宽度：100%；
}
.首先{
自我辩护：开始；
背景色：红色；
宽度：50px；
}
.中{
背景颜色：绿色；
宽度：70px；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
身高：100%；
}
.最后{
自我辩护：结束；
背景颜色：蓝色；
宽度：200px；
}

居中
使用
1fr
而不是
auto
，因为您要明确定义元素的宽度


.container{
显示：网格；
网格模板柱：1fr 1fr 1fr；
高度：100px；
/*中心*/
垫底：5px；
背景：线性渐变（黑色，黑色）底部中心/5px 5px无重复；
}
.首先{
自我辩护：开始；
背景色：红色；
宽度：50px；
}
.中{
自我辩护：中心；
背景颜色：绿色；
宽度：70px；
}
.最后{
自我辩护：结束；
背景颜色：蓝色；
宽度：200px；
}

居中
所以您希望列之间的间隙不相等？是的，我希望它居中，即使这意味着间隙不相等。flexbox：（使用网格，只需将“自动”替换为1fr）问题是渲染引擎不知道将中心列与什么对齐。对于同级元素，没有“中心”的概念，只有parent.flexbox解决方案：