Html 将一个图元置于另一个图元的中心

我想制作一个带有居中文本框的标题，但似乎无法居中。我知道有人问过无数类似的问题，但我不知道在图片上方的文本框中我会怎么做

这里有人有解决办法吗？我更喜欢使用flex。 在代码片段中，我试图将红色框居中

#容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
位置：相对位置；
背景：紫色；
宽度：100%；
高度：100vh；
}
#背{
背景：蓝色；
身高：80%；
宽度：80%；
}
#顶{
位置：绝对位置；
背景：红色；
宽度：40%；
身高：40%；
左边缘：25%；
页边顶部：自动；
}

#容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
位置：相对位置；
背景：紫色；
宽度：100%；
高度：100vh；
}
#背{
背景：蓝色；
身高：80%；
宽度：80%；
}
#顶{
位置：绝对位置；
背景：红色；
宽度：40%；
身高：40%；
左：50%；/*水平居中*/
顶部：50%；/*垂直居中*/
变换：平移（-50%，-50%）/*调整以精确居中；详细信息：
http://stackoverflow.com/q/36817249 */
}

#容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
位置：相对位置；
背景：紫色；
宽度：100%；
高度：100vh；
}
#背{
背景：蓝色；
身高：80%；
宽度：80%；
}
#顶{
位置：绝对位置；
背景：红色；
宽度：40%；
身高：40%；
左：50%；/*水平居中*/
顶部：50%；/*垂直居中*/
变换：平移（-50%，-50%）/*调整以精确居中；详细信息：
http://stackoverflow.com/q/36817249 */
}

---

下面是另一个答案

#容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
位置：相对位置；
背景：紫色；
宽度：100%；
高度：100vh；
}
#背{
背景：蓝色；
身高：80%；
宽度：80%；
}
#顶{
位置：绝对位置；
背景：红色；
宽度：40%；
身高：40%；
左：0；
右：0；
左边距：自动；
右边距：自动；
利润率最高：12%；
}

---

下面是另一个答案

#容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
位置：相对位置；
背景：紫色；
宽度：100%；
高度：100vh；
}
#背{
背景：蓝色；
身高：80%；
宽度：80%；
}
#顶{
位置：绝对位置；
背景：红色；
宽度：40%；
身高：40%；
左：0；
右：0；
左边距：自动；
右边距：自动；
利润率最高：12%；
}

哦，这就是为什么他们使用transform-translate！（非常感谢。）哦，这就是为什么他们使用转换-翻译！（非常感谢。）