Html 用flexbox将一个孩子固定在中心

我试图用flexbox将每个“父”的“子-特征”与“容器”类的中心对齐

.parent.one {
     margin-left: -30px;
}
.parent.two {
    margin-left: 50px;
}
.parent.three {
    margin-left: -200px;
}

这就是我现在拥有的：


这是期望的输出：


这可能吗


.parent{
显示器：flex；
调整项目：灵活启动；
身高：100%；
边框颜色：#3B8686；
证明内容：中心；
边缘底部：1米；
位置：相对位置；
z指数：2；
}
.孩子{
背景色：#79BD9A；
边框颜色：#CFF09E；
填充：1em；
文本对齐：居中；
边距：0.1米
}
.儿童--特色{
背景色：#3B8686；
}
1.父母1.孩子{
宽度：3em
}
.parent.one.子项：第n个子项（1）{
宽度：8em
}
.父.子：第n个子（4）{
宽度：6em
}
1.父母2.孩子{
宽度：4em；
}
.父母2.子女：第n个子女（1）{
宽度：1米
}
.父母2.子女：第n个子女（2）{
宽度：5em
}
.父母2.子女：第n个子女（3）{
宽度：6em
}
.父母2.子女：第n个子女（4）{
宽度：5em
}
1.父母3.孩子{
宽度：2米
}
三个孩子：第n个孩子（4）{
宽度：5em
}
三个孩子：第n个孩子（3）{
宽度：2米
}
三个孩子：第n个孩子（2）{
宽度：10em
}
三个孩子：第n个孩子（1）{
宽度：10em
}
.规则{
位置：绝对位置；
左：50%；
排名：0；
身高：100%；
宽度：2倍；
背景：#333；
z指数：1；
}


1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.

是的，这是可能的。我已经试过了，我的头都出来了。但我已经做到了。你可以这样说：
如果没有这些图像，这个问题很难解释。我想知道如何在没有图片的情况下写出这个问题。该死，我正要离开我的电脑过夜。如何将不同长度的行与容器中心对齐，由每行中的指定元素锚定？这比我的好。然后你需要知道行中“3”的位置，以便确定
位置的偏移值。就像我说的，CSS可能不是您在这里的最佳选择。可能会有一个更干净、更高效的JS解决方案。我不能为边距设置固定值，因为这些行将以不同的宽度为每个子行动态生成。因此，我不能用其他方法来实现这一点：（没关系。感谢您的努力。：）