Html 使用flexbox使动态对象居中

当游戏开始时，flexbox居中效果很好（在静态对象上）。 在游戏过程中（标题和剩余div）都会更改其值/大小，从而导致flexbox不断调整中心位置（标题中的所有div都在移动）

我希望头球内的每个球在比赛中都保持“固定”

这是可能的只是使用flexbox还是我应该使用另一种方法？ 我应该单独定位每个元素吗

您可以在远程服务器上观察标头行为：

正文{
保证金：0；
宽度：100%；
身高：100%；
}
标题{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
背景色：白色；
}
#游戏窗口{
位置：绝对位置；
宽度：90vw；
高度：90vw*16/9；
最高：50%；
左：50%；
转换：翻译（-50%，-46%）；
背景颜色：灰色；
}

生命1生命2生命3
标题（获胜时更改）
剩余：（从100到0）

一种方法是在主布局中使用网格，在网格的每个元素中使用flexbox组件

标题类似于：

header {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 10vh;
}

您需要将每一列都设置为“display:flex；”容器。这将是“生活”的一个例子：

如果需要，我可以向您展示更复杂的示例

---

参考资料：

非常接近。如果在div内部只有一个元素，那么它工作得很好，但是在#lifes div内部有3个对象，因此输出就像使用justify content:space-between一样分布。生活应该紧靠在一起，同时以生活为中心。你知道怎么解决这个问题吗？我在远程服务器上更新了这个。问题在于应用于每个图标的类fas的“margin:auto”中。例如，将该边距设置为0或10px。值“auto”使边距填满所有可用空间。很好的游戏，顺便说一句，令人印象深刻。非常感谢你，没有发现边际：自动，工作很棒！

#lifes{
  display: flex;
  align-items: center;
  justify-content: center;
}