使用flexbox垂直居中图像

Question

如何垂直居中这些图像对？

我到处搜索并尝试align-items: center属性但没有成功。

.first {
  display: flex;
  justify-content: center;
  align-items: center;
}

.first img {
  width: 580px;
  height: 50vh;
}

.second {
  display: flex;
  justify-content: center;
}

.second img {
  padding-top: 2px;
  width: auto;
  height: 290px;
}

<div class="first">
  <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>

<div class="second">
  <img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
  <img src="https://68.media.tumblr.com/64123ccb4f9358207ae32b94646138ca/tumblr_ni9bysrHCt1sh9i3lo1_1280.jpg" alt="">
</div>

https://jsfiddle.net/jsxor8a1/

编辑：

我不知道这是否是正确的方法，但它修复了它。我加了一个保证金：25vh;在第一个图像的顶部，并将其完美地定位在中心。

.first {
  display: flex;
  justify-content: center;
  align-items: center;
}

.first img {
  margin-top: 25vh;
  width: 580px;
  height: 25vh;
}

.second {
  display: flex;
  justify-content: center;
}

.second img {
  padding-top: 2px;
  width: 290px;
  height: 25vh;
}

<div class="first">
  <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>

<div class="second">
  <img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
  <img src="https://68.media.tumblr.com/64123ccb4f9358207ae32b94646138ca/tumblr_ni9bysrHCt1sh9i3lo1_1280.jpg" alt="">
</div>