如何使用弹性盒将物品堆叠在彼此之上？

Question

所以我只是搜索了很多内容而无法为此找到解决方案。我希望2个项目水平和垂直居中。这里的诀窍是我想把它们叠加在一起，没有位置问题：绝对，但我不能用绝对位置居中元素。我认为无论如何这应该适用于flexbox。堆叠是指一个元素部分隐藏另一个元素。

Answer 1

可以设置容器align-items: center和justify-content: center以进行水平和垂直居中。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;
}