在div元素中垂直对齐图像？

Question

我有一个div元素，它的高度是用em设置的，宽度是用百分比设置的。其中包含一个图像。它的宽度以百分比表示(83%)。但是，如果我使用的分辨率是div元素开始变得有点窄，图像也会变窄，但不是占据整个div (正如它应该的那样)，图像只是变小并显示在div的顶部。为了弥补这一点，我希望在div元素中垂直对齐我的图像。我该怎么做呢？

Answer 1

垂直对齐在DIV元素中不起作用。唯一的方法是在css中将此属性设置为您的div：

.divClass
{
   display:table-cell;
   vertical-align:middle;
}

之后，您的DIV元素的行为将类似于表的TD元素。

要将div中的图像与指定图像垂直位置的百分比对齐，请查看下面的链接(百分比值)：

http://reference.sitepoint.com/css/vertical-align

Answer 2

给div position:absolute和里面的图片position:relative，top:50%和页边距等于图片高度的一半。这将使您的图像垂直居中。

div{
    border:1px solid red;
    width:400px;
    height:400px;
    position:relative;
}

img{
    position:absolute;
    top:50%;
    margin-top:-64px; /*negative half image height */
}

在http://jsfiddle.net/qtL4n/查看工作示例