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

当您从默认的弯曲方向切换为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 2

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>

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

    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