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

Question

因此，我尝试使用CSS和引导程序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%);