Flexbox css: как центрировать 2 изображения - верх / низ

Question

Я пытаюсь отцентрировать изображения - одно на другое.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

div.out {
  display: flex;
  justify-content: center;
}

div.in {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div.div1 {
  background-color: violet;
  width: 100%;
  height: 100%;
}

.top {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 999;
}

.bottom {
  width: 200px;
  height: 200px;
  position: absolute;
}

<div class="out div1">
  <div class="in">
    <img class='top' src="./one.jpg" />
    <img class='bottom' src="./background.jpg" />
  </div>
</div>

кодовый код здесь: https://codepen.io/anon/pen/MzLRaR

Я не могу справиться с выравниванием по центру обоих изображений, таких как:

Любые советы или как справиться с этим наилучшим образом?

Answer 1

Здесь следует сделать трюк.

html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    div.out {
        display: flex;
        justify-content: center;
    }

    div.in {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    div.div1 {
        background-color: violet;
        width: 100%;
        height: 100%;
      position:relative;
      overflow:hidden;
    }

    .top { 
          position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 19;
    }

DEMO

Answer 2

Когда вы переключаетесь из стандартного направления flex на flex-direction: column, «ось» изменяется, поэтому justify-content становится вертикальным выравниванием, а align-items становится горизонтальным

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

div.out {
  display: flex;
  justify-content: center;   /* This centers horizontally */
  align-items: center;       /* This centers vertically */
}

div.in {
  display: flex;
  flex-direction: column;
  justify-content: center;    /* This centers vertically */
  align-items: center;        /* This centers horizontally */
}

div.div1 {
  background-color: violet;
  width: 100%;
  height: 100%;
}

.top {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 999;
}

.bottom {
  width: 200px;
  height: 200px;
  position: absolute;
}

<div class="out div1">
  <div class="in">
    <img class='top' src="./one.jpg" />
    <img class='bottom' src="./background.jpg" />
  </div>
</div>

Answer 3

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0; }

div.out {
    display: flex;
    justify-content: center;
}

div.in {
    display: flex;
    flex-direction: column;
    justify-content: center;
  position:relative;
}

div.div1 {
    background-color: violet;
    width: 100%;
    height: 100%;
}

.top { 
  width: 100px; height: 100px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index: 999;
}

.bottom {
 width: 200px; height: 200px;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

<div class="out div1">
<div class="in">
    <img class='top' src="https://hypixel.net/proxy/aHR0cHM6Ly9jZG4uZGlzY29yZGFwcC5jb20vYXR0YWNobWVudHMvMzczMDEzNDIyNTQ1MTc0NTI4LzM3MzAxNDA5NzE2OTQ4MTcyOS9oU3UwVWpNQy5wbmc%3D/image.png"/>
    <img class='bottom' src="https://www.missioncloud.com/img/global/customers/bg/dreamworks_500x500.jpg"/>
</div>