How to align the parallax to the middle of a div?

Question

I created a parallax effect that will use the mouse coordinates to move. The effect is working, but I can't get the red box position horizontal and vertically centered of the parent div, so the parallax is active around the red box and within the parent div - whatever factor is used for the parallax:

function mouseMove(event) {
  var target = $(this);
  var dot = target.find('.pointer');

  var height = dot.height();
  var width = dot.width();

  var offset = target.offset();
  var w = target.width();
  var h = target.height();
  var top = offset.top;
  var left = offset.left;

  var mX = (event.pageX - left) - width / 2;
  var mY = (event.pageY - top) - height / 2;

  TM.to(dot, 1, { x: mX, y: mY, scale: 1, ease: Quint.easeOut, force3D: !0 });


  var icon = $('.icon');
    var iWidth = icon.width();
    var iHeight = icon.height();

        var factor = .05;
        var x = ((event.pageX - left) - (iWidth / 2)) * factor;
        var y = ((event.pageY - top) - (iHeight / 2)) * factor;

  TM.to(icon, 1, { x: x, y: y, scale: 1, ease: Quint.easeOut, force3D: !0 });


};

http://codepen.io/anon/pen/oLQWOG

Update

Answer 1

Nice parallax. If you mean you want to center the red box margin: 0 auto was all you needed.

.icon {
    height: 150px;
    width: 150px;
    display: block;
    background: red;
    margin: 0 auto;
}