Html 在背景上水平和垂直对中DIV

因此，我尝试使用css和bootstrap 4编写以下布局：

基本上，DIV1和DIV2是背景的一部分，应该始终保持在原来的位置，即DIV1始终位于右上角，DIV2始终位于右下角

我通过以下方式实现了这一目标：

#DIV1 {
    position: relative;
}
#DIV1 img {
    position: absolute;
    top: 50px;
    right: 25px;
    width: 20%;
    height: auto;
}

#DIV2 {
    position: relative;
}

#DIV2 img {
    position: fixed;
    bottom:-150px;
    right:-50px;
    width: 40%;
    height: auto;
}

---

但是我不知道如何使用DIV3，它不是背景的一部分，如果需要的话应该包括DIV1和DIV2。DIV3应垂直和水平居中，并应具有响应性，即应在较小屏幕上缩小比例。我不知道如何实现这一点，这是否是引导网格的一个用例？我应该将DIV1、DIV2和DIV3放在一个网格中吗？

这是您想要的解决方案吗

html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
img{
宽度：100%；
身高：100%；
}
#第一组{
位置：绝对位置；
排名：0；
右：0；
宽度：80px；
身高：40%；
}
#第二组{
位置：绝对位置；
底部：0；
右：0；
宽度：120px；
身高：40%；
}
#第三组{
位置：绝对位置；
左：0；
右：140px；
排名：0；
底部：0；
保证金：自动；
宽度：35%；
身高：50%；
}

使用

---

也请发布HTML。虽然这段代码可能会解决这个问题，但如何以及为什么解决这个问题将真正有助于提高您的文章质量，并可能导致更多的投票。请记住，你是在将来回答读者的问题，而不仅仅是现在提问的人。请在回答中添加解释，并说明适用的限制和假设。

position: absolute;
margin-left: 50%;
margin-top: 50%;
transform: translate(-50%, -50%);