Wie stapelt man Gegenstände übereinander mit der Flex Box?

Question

Also habe ich einfach viel gegoogelt und konnte keine Lösung dafür finden. Ich möchte, dass zwei Objekte horizontal und vertikal zentriert werden. Der Trick hier ist, dass ich sie übereinander stapeln möchte, kein Problem mit der Position: absolut, aber ich kann die Elemente nicht mit einer absoluten Position zentrieren. Ich denke, das sollte bei flexbox irgendwie funktionieren. Mit stapeln meine ich, dass ein Element das andere teilweise verdeckt.

Answer 1

Der Behälter kann align-items: center und justify-content: center zur horizontalen und vertikalen Zentrierung eingestellt werden.

.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

Vielleicht so etwas? 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; 
}