在背景上水平和垂直居中DIV

Question

所以我试图使用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放在网格中吗？

Answer 1

这个解决方案是您正在寻找的吗？

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

img {
    width: 100%;
    height: 100%;
}

#DIV1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 40%;
}

#DIV2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 40%;
}

#DIV3 {
  position: absolute;
  left: 0;
  right: 140px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 35%;
  height: 50%;
}

<div id="DIV1">
    <img src="https://picsum.photos/300/300/?random">
</div>
<div id="DIV2">
    <img src="https://picsum.photos/300/300/?random">
</div>
<div id="DIV3">
    <img src="https://picsum.photos/300/300/?random">
</div>

Answer 2

使用

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