Html 绝对容器中的CSS flex布局

我有下面的HTML/CSS，它有一个容器（

.full width.section3

），它有一个绝对高度。但是，将内容集中在其中是行不通的。由于我是flex模型的新手，有人能给我解释一下，为什么三个子

div

s没有垂直居中

正文{
保证金：0；
}
.集装箱{
显示器：flex；
柔性包装：包装；
高度：100vh；
背景色：白色；
}
.全宽{
宽度：100%；
}
.全宽。第3节{
身高：795px；
}
.full width>.content>.third parent{
身高：100%；
显示器：flex；
}
.full width>.content>.third parent>.third{
位置：相对位置；
弹性：10像素；
宽度：100%；
边框：1px纯黑；
}
.full width>.content>.third parent>.third>img{
位置：绝对位置；
宽度：100%；
高度：自动；
左：50%；
最高：50%；
能见度：可见；
文本对齐：居中；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.中间文本{
位置：绝对位置；
宽度：100%；
左：50%；
最高：50%；
能见度：可见；
文本对齐：居中；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.full width>.content>.third parent>.third>.middle text>.list-div2{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
}
.full width>.content>.third parent>.third>.middle text>.list-div2 li{
位置：相对位置；
显示：块；
边缘底部：5px；
填充：10px；
文本对齐：左对齐；
文本转换：大写；
能见度：可见；
}
.list-div2 li:：之前{
内容：'\2022'；
右边距：10px；
}
.项目-2{
保证金：0；
填充：0；
}

一些标题

条目A
条目B
条目C
条目D

您将flex与绝对定位相结合。这打破了子元素的灵活性：

因为它是流动的，一个绝对定位的子flex 容器不参与flex布局

---

来源：

您将flex与绝对定位相结合。这打破了子元素的灵活性：

因为它是流动的，一个绝对定位的子flex 容器不参与flex布局

---

来源：

我不太清楚您想要实现什么，但flex布局不适合绝对定位的孩子

如果对中是个问题，那么flexbox中有您可用的选项

  justify-content: center;
  align-items: center;

正文{
保证金：0；
}
.集装箱{
显示器：flex；
柔性包装：包装；
高度：100vh；
背景色：白色；
}
.全宽{
宽度：100%；
}
.全宽。第3节{
身高：795px；
}
.full width>.content>.third parent{
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px纯黑；
文本对齐：居中；
}
.full width>.content>.third parent>.third{
位置：相对位置；
弹性：10像素；
宽度：100%；
边框：1px纯黑；
}
.full width>.content>.third parent>.third>img{
最大宽度：100%；
显示：块；
}
.full width>.content>.third parent>.third>.middle text>.list-div2{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
}
.full width>.content>.third parent>.third>.middle text>.list-div2 li{
位置：相对位置；
显示：块；
边缘底部：5px；
填充：10px；
文本对齐：左对齐；
文本转换：大写；
能见度：可见；
}
.list-div2 li:：之前{
内容：'\2022'；
右边距：10px；
}
.项目-2{
保证金：0；
填充：0；
}

一些标题

条目A
条目B
条目C
条目D

我不太清楚您想要实现什么，但flex布局不适合绝对定位的孩子

如果对中是个问题，那么flexbox中有您可用的选项

  justify-content: center;
  align-items: center;

正文{
保证金：0；
}
.集装箱{
显示器：flex；
柔性包装：包装；
高度：100vh；
背景色：白色；
}
.全宽{
宽度：100%；
}
.全宽。第3节{
身高：795px；
}
.full width>.content>.third parent{
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px纯黑；
文本对齐：居中；
}
.full width>.content>.third parent>.third{
位置：相对位置；
弹性：10像素；
宽度：100%；
边框：1px纯黑；
}
.full width>.content>.third parent>.third>img{
最大宽度：100%；
显示：块；
}
.full width>.content>.third parent>.third>.middle text>.list-div2{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
}
.full width>.content>.third parent>.third>.middle text>.list-div2 li{
位置：相对位置；
显示：块；
边缘底部：5px；
填充：10px；
文本对齐：左对齐；
文本转换：大写；
能见度：可见；
}
.list-div2 li:：之前{
内容：'\2022'；
右边距：10px；
}
.项目-2{
保证金：0；
填充：0；
}

一些标题

条目A
条目B
条目C
条目D

您需要删除位置：绝对；到