flexbox图形元素中的图像垂直居中

Question

我目前正在为一个网站重新设计一个公文包部分，其想法是为每个客户端提供一个有代表性的图像，作为链接块的背景，当你将鼠标悬停在图像上时，一个半透明的覆盖层和一些简短的文本摘要会很容易出现。单击此块可以将用户带到一个单独的页面，该页面更详细地描述了客户端及其工作。公文包部分采用柔性框显示，便于响应。

以下是我所掌握的内容的节略版本：https://jsfiddle.net/ddw2m9ea/

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Open Sans;
}
.row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
figure {
    overflow: hidden;
    flex: 1 0 0px;
    position: relative;
    margin: 0;
    height:240px;
}
figure > img {
    width:100%;
}
a > img {
    max-width: 100%;
    vertical-align: middle;
}

我已经尝试将vertical-align: middle;应用于一些没有效果的东西，目前您可以看到，随着图像变得越来越大，图像继续向下流动，从容器中流出。我需要一个解决方案，将图像垂直居中，而不改变它们的尺寸。

Answer 1

vertical-align: middle在将某些内容设置为display: inline-block;但不设置任何块级元素的情况下工作。这种垂直对齐只会影响文本流中的项目（将某些内容作为inline-block即可实现）。

然而，你可以这样做：

figure > img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这将始终使您的图像保持在figure的中心，因为您已经在figure上将position设置为relative。

Fiddle示例

Answer 2

您可以在图上添加一个行高属性，因为您已经设置了元素的高度。所以你把它添加到你的CSS图中{line-height:240px}。希望这能有所帮助。