JSFiddle - React, Tailwind, and code Playground

HTML

<div><img src="http://www.crummy.com/photos/2006/06-Worcester/09-The%20Foo%20Bar.jpg" alt="foobar" /></div>

CSS

div {
    height: 150px;
    width: 50%;
    border: 1px solid red;
}

img {
    height: auto;
    max-width: 80%;
    display: block;
    border: 1px solid blue;
    margin: 0 10%;
}

JavaScript

$('img').bind('load', function() {
    console.log('img loaded and height is ' 
                + $(this).height());
    
    setMargin();
}).show('blind', 1500, setMargin);

console.log('img: ' + $('img').height());
console.log('div: ' + $('div').height());

function setMargin() {
    var marginTop = 
        ( $('img').closest('div').height() 
        - $('img').height() ) / 2;
    
    console.log('marginTop: ' + marginTop);
    
    $('img').css('marginTop', marginTop + 'px');
}