Nasıl bir görüntü (ya da flash) CSS ile dikey olarak içeren <div> Hizala. Yükseklik ve genişlik dinamik.

Bu yatay ve dikey olarak ya da kap, ne de çocuğun bilinen boyutları olmadan ortalamak için bu saf CSS2 bir çözümdür. Hayır kesmek katılıyor. this answer bunları keşfettim ve ben de this answer bunu gösterdi.

The solution satır yüksekliği sabit olan line-height: 0 ile birlikte vertical-align: middle dayanmaktadır.

HTML:

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="" />
    </span>
</span>

Ve CSS:

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

IE8, 9, 11.51, Safari 5.0.5, FF Opera 6.0, Chrome 13.0 Windows 7 üzerinde test edilmiştir.

Sadece ihtar eden iki içteki unsurlar in this fiddle gösterildiği gibi bir satır boşluğu, IE 7,:

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

Span ayrıca IE 7 için gerekli olduğunu unutmayın. Diğer her tarayıcıda span div şey olabilir.