Center image inside a container

Works with IE7 (not 6)

by beneverard

HTML

<div>
    <img src="http://www.tokeofthetown.com/2011/01/10/chuck-norris-2.jpeg" />
</div>

CSS

div {
    border: 1px solid red;
    height: 360px;
    width: 360px;
    position: relative;
    background-color: yellow;
}

img {
    max-height: 350px;   
    width: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    
    /* this needs to be ie only */
    /* http://ultimorender.com.ar/funkascript/beta/css/vertical_center.htm */
    /* not supporting in gt IE8, which is good http://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx */
    margin-top: expression(( 360- this.height ) / 2); 
    margin-left: expression(( 360- this.width) / 2);
}

JavaScript

$(document).ready(function() {
   
    $('img').click(function() {
       
        $(this).fadeOut()
        
    });
    
});