Bootstrap 4+ - Вертикально + горизонтальное выравнивание 2 div друг над другом внутри другого div с установленной высотой

Question

Я просто пытаюсь создать div с фоновым изображением, и в середине этого div у меня есть 2 других div, которые мне нравятся, чтобы они были вертикально и горизонтально центрированы внутри первого div, но я хочу, чтобы они были включены друг над другом. Я пробовал все возможные способы заставить это работать, они никогда не накладываются друг на друга.

<div style="height:400px;background-color:red;margin-top:auto;margin-bottom:auto">
    <div class="d-flex  justify-content-center h-100">
        <div style="width:200px"> div 1</div>
        <div style="width:200px"> div 2</div>
    </div>
</div>

Answer 1

Попробуйте добавить в контейнер классы «flex-column» и «align-items-center», и; и "margin: 0 auto" для внутренних блоков div, чтобы центрировать их:

<div class="d-flex flex-column justify-content-center align-items-center h-100">
    <div style="width:200px; margin:0 auto; background: pink"> div 1</div>
    <div style="width:200px; margin:0 auto; background: lightblue"> div 2</div>
</div>