html - flexbox CSS : how to center 2 images - top/bottom

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

我无法通过居中对齐来处理这些图像，例如:

任何提示或如何以最佳方式处理它？<​​/p>

Answer 1

当您从默认的 flex-direction 切换到 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>