Как складывать элементы друг над другом с помощью гибкой коробки?

Question

Так что я просто много гугл и не смог найти решение для этого. Я хочу, чтобы 2 элемента были центрированы по горизонтали и по вертикали. Трюк здесь в том, что я хочу складывать их друг над другом, без проблем с положением: абсолютный, но я не могу центрировать элементы с абсолютной позицией. Я думаю, что это все равно должно работать с flexbox. С укладкой я имею в виду, что один элемент частично скрывает.

Answer 1

Контейнер может быть установлен и align-items: centerjustify-content: center для горизонтального и вертикального центрирования.

.outer { 
 
    align-items: center; 
 
    background: #800000 none repeat scroll 0 0; 
 
    border: 5px solid #353535; 
 
    border-radius: 50%; 
 
    display: flex; 
 
    height: 300px; 
 
    justify-content: center; 
 
    position: relative; 
 
    width: 300px; 
 
} 
 
.inner { 
 
    background: #C83737; 
 
    border: 5px solid #353535; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

Answer 2

Может быть что-то вроде этого? fiddle

<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 

.container { 
    display: flex; 
    flex-flow: wrap; 
    align-items: center; 
    justify-content: center; 
    border: 1px solid black; 
    height: 500px; 
    width: 100%; 
    align-content: center; 
} 

.item { 
    flex: 1 100%; 
    border: 1px solid black; 
    height: 100px; 
} 

Answer 3

this

<div class='item1'> 
     <div class='item2'></div> 
    </div> 


    html, body{ 
    height: 100%; 
} 
body{ 
    display: flex; 
    flex:1 1 auto; 
    justify-content:center; 
    align-items:center 
} 

.item1 { 
    display: flex; 
    width: 200px; 
    height: 200px; 
    background: red; 
    justify-content: space-around; 
    align-items:center 
}  


.item2 { 
    width: 100px; 
    height: 100px; 
    background: green; 
}