jquery vertical center multiple images of different dimensions
===

I have a fluid grid layout, 3 rows, each with 3 different % width blocks. Essentially this is a 3x3 grid that expands both horz and vert in the viewport, albeit different width blocks. In each block, there is an image set to 100% width.

I wrote this small script to vertically align these images within the blocks, however, the margin-top is applying the same value to all the images. I need it to apply the value to the individual images.

    <script>
    $(window).on('resize', function () {
    var $gii = $('.grid-item-img');
    var giih = $gii.height();
    $gii.css('margin-top', + giih / -2 + "px");
    }).trigger('resize');
    </script>

The CSS on the grid-item-img is:

    .grid-item-img {display: block; width: 100%; position: absolute; top: 50%;}

Thanks!