css - 图像在确定高度的中心位置

Question

我正在尝试将图像定位在确定的高度。

就像这张主图:

http://littlelines.com/

我有这个:

HTML

<div class="present100">
<img id="imagem" src="teste.jpg" />
</div>

CSS

.present100 {
    width: 100%;
    height: 620px;
    background-color: #333;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    margin: auto;
}

#imagem {
    position: relative;
    width: 100%;
    min-width: 1300px;
    min-height: 100%;
}

我不知道如何在调整大小时将图像居中，就像 http://littlelines.com/

Answer 1

不确定为什么你在 .present100 元素上有绝对定位，但你也必须绝对定位图像

#imagem {
    position: absolute;
    width: 100%;
    min-width: 1300px;
    min-height: 100%;

    left:50%;
    top:50%;

        -ms-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

演示在 http://jsfiddle.net/gaby/vMyvc/