How to center an element to the position of the mouse with jQuery?
<p>So I have this box that I would like to follow the mouse when I move the mouse around but would like the mouse to always be in the center of the box.  I don't mean the box has to but literally under the box but what I mean is to have the box ONLY move vertically up and down to be inline with the mouse.</p>

<p>I tried several ways but couldn't get it to work and when I did for a bit it didn't center properly.</p>

<p>Here is my JS:</p>

<pre><code>$( ".wrapper" ).mousemove(function(e) {
    var box = $( '.box' ).outerHeight();

    box = box / 2;

    $( '.box' ).css( 'top', ( e.pageY - box ) + 'px' );
} );
</code></pre>

<p>Here is a fiddle -> <a href="http://jsfiddle.net/rCabj/" rel="nofollow">http://jsfiddle.net/rCabj/</a></p>

<p>Thanks!</p>
