Come impilare gli oggetti uno sopra l'altro con la scatola flessibile?

Question

Quindi ho cercato su Google e non sono riuscito a trovare una soluzione. Voglio che 2 oggetti siano centrati orizzontalmente e verticalmente. Il trucco qui è che voglio impilarli uno sopra l'altro, nessun problema con la posizione: assoluto, ma non posso centrare gli elementi con una posizione assoluta. Penso che questo dovrebbe funzionare comunque con la flexbox. Con impilamento intendo in modo che un elemento nasconda parzialmente l'altro.

Answer 1

Il contenitore può essere impostata align-items: center e justify-content: center per centratura orizzontale e verticale.

.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

Forse qualcosa di simile? 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; 
}