【问题标题】：Vertically centering image in flexbox figure elementflexbox图形元素中的垂直居中图像
【发布时间】：2015-04-26 16:08:23
【问题描述】：

我目前正在重新设计一个网站的投资组合部分，其想法是为每个客户制作一个具有代表性的图像作为链接块的背景，当您将鼠标悬停在图像上时，半- 带有一些简短文本摘要的透明叠加层可以轻松进入。可以单击此块以将用户带到一个单独的页面，该页面更详细地描述了客户端及其工作。作品集部分采用弹性框显示，便于响应。

这是我所掌握的内容的精简版：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; 应用于一些没有效果的事情，目前您看到图像继续向下流动，从容器中向下流动，因为它变得越来越大。我需要一个解决方案，将图像垂直居中而不改变它们的尺寸。

【问题讨论】：

标签： html css centering flexbox figure

【解决方案1】：

vertical-align: middle 如果您将某些内容设置为 display: inline-block; 而不是任何块级元素，则可以使用。这种垂直对齐只会影响文本流中的项目（将某些内容作为inline-block 将完成）。

但是，您可以这样做：

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

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

Example Fiddle

【讨论】：

【解决方案2】：

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

【讨论】：

如果元素在文本流中，行高将起作用，但目前不是。您需要显示inline 或inline-block 来实现这一点。空白也可能成为一个问题。