Html 将div置于另一个div的中心，防止其熄灭

我开发了一个div，在这个div里面我打算放一个图像，然后是一组两个div

有没有办法使下面的两个div居中，并防止它们在屏幕缩小时超出主div

有人能帮我吗

代码

<div class="col-md-6 col-sm-12">
    <div class="drop">
        <div class="abc">
            <img src="https://material-components-web.appspot.com/images/photos/2x3/2.jpg">
            <div class="boxImage" style="display:flex">
                <div class="boxImage1">
                </div>
                <div>
                </div>
            </div>
        </div>
    </div>
</div>

我怎样才能使两个div居中

我怎样才能阻止他们离开主分区

---

我不能100%肯定这能回答你的问题，但我的看法是这样的。我不得不对你的css做一些修改，因为boxImage类有点偏离了它。我设置了这些div的背景色，这样你就可以看到它们在屏幕上的位置

app.component.html

<div class="col-md-6 col-sm-12">
<div class="d-flex justify-content-center p-2"><img src="https://material-components-web.appspot.com/images/photos/2x3/2.jpg"></div>
<div class="d-flex justify-content-center mb-3">
  <div class="p-2 boxImage1">Flex item 1</div>
  <div class="p-2 boxImage">Flex item 2</div>
</div>

---

你是想将div居中在图像的上方还是下方？@JamesShaver我打算将div居中在图像的下方，图像中的div用绿色表示。非常感谢你的回复。这几乎就是我想要的！这个解决方案的问题是它不包含类drop，我打算使用它。非常感谢你试图帮助我！很乐意帮忙！老实说，我说不出你想对这个辍学班做什么，而且它似乎挡住了我的去路，所以我把它漏掉了：）

    .drop {
    height: 670px;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    background: #eff0f2;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin-left: 8px;
    margin-right: 8px;

}

.abc {
    height: 100%;
  background-image: ('https://material-components-web.appspot.com/images/photos/2x3/2.jpg');
  }



.abc .boxImage {
    position: absolute;
    right: 27px;
    bottom: 40px;
}

.abc .boxImage1 {
    position: absolute;
    right: 373px;
    bottom: 0px;
}

.boxImage {
    background-color: red;
    background-repeat: no-repeat;
    height: 50px;
    width: 60%;
    border-radius: 8px;
    opacity: 1;
    font-size: 18px;
}

.boxImage1 {
    background-color: yellow;
    background-repeat: no-repeat;
    height: 50px;
    border-radius: 8px;
    opacity: 1;
    font-size: 18px;
    z-index: 1001;
}