How to stack items above each other with flex box?

Question

So I just googled a lot and was not able to find a solution for this. I want 2 items to be centered horizontally and vertically. The trick here is that I want to stack them above each other, no problem with position:absolute, but I can't center the elements with an absolute position. I think that this should work anyhow with flexbox. With stacking I mean so that one element is hiding the other partially.

Answer 1

The container can be set align-items: center and justify-content: center for horizontal and vertical centering.

.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

Maybe something like this? 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;
}