将图像垂直对齐到div的中间

Question

我可以使用一些CSS帮助让CSS在div中间垂直对齐。

以下是代码：

<div id="imageSet-container">
    <div class="image-container">
        <div class="frame-title">Title Here</div>
        <div class="frame-image">
            <a href="xxxx"><img alt="" src="XXXXXX"></a>
        </div>
        <ul class="frame-meta">
            <li>0 Comments</li>
        </ul>
    </div>

     XXX Multiple image-containers repeat here

</div>

.image-container {
 float: left;
 height: 250px;
 margin: 10px 10px 0px 0px;
 text-align: center;
 width: 250px;
}
.image-container .frame-image {
   height: 180px;
   vertical-align:middle;
}
.image-container .frame-image img {
    max-width:170px;
    max-height:200px;
}

我希望.frame-image img在.frame-image的中间垂直对齐，但它始终位于顶部。

想法？

Answer 1

将180px的行高设置为.image-container .frame-image似乎可以正常工作

Answer 2

最好的方法是使用jax根据div大小设置顶部和左侧：

img.left = div.width / 2 - img.width / 2
img.top = div.height / 2 - img.height / 2

Answer 3

而不是给父级固定高度，你可以尝试给孩子填充，因为上边距和下边距是相同的，它将位于容器的中间。