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

Question

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

Answer 1

容器可以设置align-items: center,justify-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>