Html Flex容器CSS：如何将div元素居中？

我有下面的HTML/CSS代码，我有一个问题是如何将内容集中在flex容器中。结果是：

在我看来，我想在flex容器中居中放置圆环，并在圆环动画中的温度之后居中放置文本（温度）和CSS动画（箭头）

如何做到这一点

正文{
背景色：#0d74ff；
}
.集装箱{
填充：20px；
}
.柔性包装{
显示器：flex；
柔性包装：包装；
}
.细胞{
位置：相对位置；
高度：200px；
宽度：200px；
边框：1px实心rgba（0,0,0,0.25）；
}
.装载机环{
宽度：150px；
高度：150像素；
}
.装载机环形灯{
宽度：150px；
高度：150像素；
边界半径：150px；
长方体阴影：0 4px 0#ffffff插图；
动画：旋转360度6秒线性无限；
}
.加载器文本{
字体大小：粗体；
字号：2em；
}
.向下滚动{
边框：2倍实心#fff；
边界半径：100px；
宽度：30px；
高度：30px；
}
.向下滚动i{
显示：块；
边界半径：100px；
过渡：所有0.4s缓解；
宽度：100%；
身高：100%；
背景尺寸：0自动；
动画：脉冲1.5s 0无限正常前进；
背景图像：url（“https://jamesmuspratt.com/codepen/img/arrow-down.svg");
背景重复：无重复；
}
@关键帧旋转-360度{
从{
变换：旋转（0）；
}
到{
变换：旋转（360度）；
}
}
@关键帧脉冲{
0% {
不透明度：0；
背景位置：中上；
背景尺寸：0自动；
}
10% {
不透明度：0；
}
50% {
不透明度：1；
背景尺寸：75%自动；
}
90% {
不透明度：0；
}
100% {
不透明度：0；
背景位置：中底；
背景尺寸：0自动；
}
}

26.6摄氏度；

这里不需要这么多块。您需要绝对定位，因为元素需要彼此堆叠。此外，对于绝对定位的元素居中，您需要此样式

.loader-ring,
.loader-ring-track {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

演示：

正文{
背景色：#0d74ff；
}
.集装箱{
填充：20px；
}
.细胞{
位置：相对位置；
高度：200px；
宽度：200px；
边框：1px实心rgba（0,0,0,0.25）；
}
/*居中绝对定位的项目*/
/*纵向和横向*/
.装载机环，
.装载机环形轨道{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.装载机环形轨道{
显示：flex；/*新*/
}
.装载机环{
宽度：150px；
高度：150像素；
}
.装载机环形灯{
宽度：150px；
高度：150像素；
边界半径：150px；
长方体阴影：0 4px 0#ffffff插图；
动画：旋转360度6秒线性无限；
}
.加载器文本{
字体大小：粗体；
字号：2em；
}
.向下滚动{
边框：2倍实心#fff；
边界半径：100px；
宽度：30px；
高度：30px；
}
.向下滚动i{
显示：块；
边界半径：100px；
过渡：所有0.4s缓解；
宽度：100%；
身高：100%；
背景尺寸：0自动；
动画：脉冲1.5s 0无限正常前进；
背景图像：url（“https://jamesmuspratt.com/codepen/img/arrow-down.svg");
背景重复：无重复；
}
@关键帧旋转-360度{
从{
变换：旋转（0）；
}
到{
变换：旋转（360度）；
}
}
@关键帧脉冲{
0% {
不透明度：0；
背景位置：中上；
背景尺寸：0自动；
}
10% {
不透明度：0；
}
50% {
不透明度：1；
背景尺寸：75%自动；
}
90% {
不透明度：0；
}
100% {
不透明度：0；
背景位置：中底；
背景尺寸：0自动；
}
}

26.6摄氏度；