Put focus on an element on the middle of a screen not working

I have a function that checks if user input is correct and if it is not I want the page to scroll to focus on that particular input field. I use the following code:

$("#myElementID").focus();

This works as expected, the page immediately jumps to that input field and puts it right on top of the page without any padding. This makes it hard to see so I want to instead focus it on the center of the screen. I found this answer on SO which shows the following code:

$("#myElementID").focus(function () {
     var center = $(window).height() / 2;
     var top = $(this).offset().top;
     if (top > center) {
         $('html, body').animate({ scrollTop: top - center }, 'fast');            
     }
 });

Now it doesn't focus at all, I tried alert and it doesn't seem to be going into the function at all.

How can I make the input focus centered on screen?

This code binds an handler to the focus event :

$("#myElementID").focus(function(){...});

It is equivalent to :

$("#myElementID").on("focus", function(){...});

You are supposed to run this code once :

$("#myElementID").focus(function () {
     var center = $(window).height() / 2;
     var top = $(this).offset().top;
     if (top > center) {
         $('html, body').animate({ scrollTop: top - center }, 'fast');            
     }
 });

And then use $("#myElementID").focus(); to trigger the focus event on your input field.