JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css">
<div class="container">
         
          <div class="row">
             <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                 <img alt="logo" onload="animate_in();" width="800" height="600" id="img_logo" onclick="animate_out();" class="animated center-block img-responsive" src="http://amigoow.byethost13.com/website%20logo.png"/>
             </div>
          </div>
       </div>

CSS

.center-y{vertical-align:middle;}

JavaScript

$( window ).on('load resize',function() {
                    window_size = $(window).height();
                    img_ht= $('#img_logo').height();
                    
                    difference_ht=(window_size) - (img_ht);
                    alert(img_ht);
                    margin_ht=(difference_ht/2).toFixed();
                    margin_ht+="px";
                    $("#img_logo").css({"margin-top": margin_ht});
            });