I'm pretty new at JavaScript, jQuery, and CSS.

I'm trying to change the position of the entire outer div so that the selected inner div will be centered in the screen without changing it's position within the outer div. I am using jQuery, but all the different options of widths, heigths, scrolls and offsets confuse me.. I'm not sure what I need to use and how.

I found this solution but it wasn't working for me:

var newX = ($outer.outerWidth(true) / 2) - ($inner.offset().left - $outer.offset().left) - ($inner.outerWidth(true) / 2);
var newY = ($outer.outerHeight(true) / 2) - ($inner.offset().top - $outer.offset().top) - ($inner.outerHeight(true) / 2);
$outer.css('transform', 'matrix(1, 0, 0, 1, ' + newX + ', ' + newY + ')');

P.S.: I'm not sure if it matters, but my outer div has massive padding. I'm pretty sure the 'outerWidth/Height' is supposed to count for that, but maybe it's one of the things that messes things up..