Animation when the element arrives at the center of the page (jQuery)

To find the exact center you will have to subtract half the width / height of the element by the width / height of the page.

Example:

posicao = $('.elemento').offset();
centro_horizontal = ($(window).width() / 2) - ($('.elemento').width()/2);
centro_vertical = ($(window).height() / 2) - ($('.elemento').height()/2);
if (posicao.left == centro_horizontal && posição.top == centro_vertical){
    alert('elemento no centro');
}

You can use the WayPoint jquery plugin link

Download the plugin, and refer to it in your HTML.

Then use the offset: 50% parameter, so it's the center of the view.

After that, just do something similar

$('#seu-elemento').waypoint(function() {
  alert('Animação acontece quando chegar no meio da página')
}, { offset: '50%' });

I've done an example at link