Question

我有一个固定高度的div容器。 div中的图像可能比div的高度大。图像的宽度设置为div的100％。我希望图像垂直居中;现在显示图像的顶部，有时可以创建一个看起来很奇怪的作物。

html是：

<div class="itemImageBlock" style="/* padding:0px; */">
      <span>
        <a class="modal" rel="{handler: 'image'}" href="/media/k2/items/cache/23ac69ecf90d97d87602b5da326dea8e_XL.jpg" title="Klik om afbeelding te bekijken">
            <figure>
                <img src="/media/k2/items/cache/23ac69ecf90d97d87602b5da326dea8e_L.jpg" alt="Bootleg Betty" style="width:100%; height:auto;">
            </figure>
        </a>
      </span>

  </div>

而css是：

div.itemImageBlock {
    padding: 0px;
    margin: 0 0 16px 0;
    height: 450px;
    overflow: hidden;
}

我试过使用display：table-cell;但随后我松开了高度并获得了完整的图像。（即溢出：隐藏丢失）

Answer 1

这是使用CSS3转换函数translate和一些绝对定位来实现它的一种方法。

在父容器上，设置高度值和position: relative。

子容器span绝对位于顶部50％从父母的上边缘开始。

然后，您可以使用transform: translateY(-50%)将范围/图像移动到父块的中心。

使用overflow: hidden隐藏图像的顶部和底部。

如果图像高度足够短，则顶部/底部空间会根据具体情况采用背景颜色（或图像）。

＆＃13;

div.itemImageBlock {
    border: 1px dotted blue;
    height: 350px;
    position: relative;
    overflow: hidden;
}
div.itemImageBlock span {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%)
}
div.itemImageBlock img {
    width: 100%;
    vertical-align: top;
}
figure {  /* Optional reset */
    margin: 0;
    padding: 0px;
}

＆＃13;

<div class="itemImageBlock"> 
    <span>
        <a href="">
            <figure>
                <img src="http://placehold.it/500x800" >
            </figure>
        </a>
      </span>
</div>

＆＃13;

Answer 2

试试这个：

.yourClass {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

You can read about this more here.

编辑：正如评论中所指出的，此方法必须应用于div而不是span，因此要么用div替换span，要么换行它在div中。

垂直对齐div中的图像

2 个答案: