Làm thế nào để chồng các vật phẩm lên nhau bằng hộp flex?

Question

Vì vậy, tôi chỉ googled rất nhiều và đã không thể tìm thấy một giải pháp cho việc này. Tôi muốn 2 mục được căn giữa theo chiều ngang và chiều dọc. Bí quyết ở đây là tôi muốn xếp chồng lên nhau, không có vấn đề gì với vị trí: tuyệt đối, nhưng tôi không thể căn giữa các phần tử với một vị trí tuyệt đối. Tôi nghĩ rằng điều này sẽ làm việc dù sao với flexbox. Với xếp chồng tôi có nghĩa là để một phần tử ẩn phần kia.

Answer 1

Bình chứa có thể được thiết lập align-items: center và justify-content: center cho định tâm theo chiều ngang và dọc.

.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

Có lẽ một cái gì đó như thế này? 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; 
}