I like adding functions to jQuery so this function would help:

jQuery.fn.center = function () {    this.css("position","absolute");    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +                                                 $(window).scrollTop()) + "px");    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +                                                 $(window).scrollLeft()) + "px");    return this;}

Now we can just write:

$(element).center();

Demo: Fiddle (with added parameter)

I put a jquery plugin here

VERY SHORT VERSION

$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});

SHORT VERSION

(function($){    $.fn.extend({        center: function () {            return this.each(function() {                var top = ($(window).height() - $(this).outerHeight()) / 2;                var left = ($(window).width() - $(this).outerWidth()) / 2;                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});            });        }    }); })(jQuery);

Activated by this code :

$('#mainDiv').center();

PLUGIN VERSION

(function($){     $.fn.extend({          center: function (options) {               var options =  $.extend({ // Default values                    inside:window, // element, center into window                    transition: 0, // millisecond, transition time                    minX:0, // pixel, minimum left element value                    minY:0, // pixel, minimum top element value                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)                    vertical:true, // booleen, center vertical                    horizontal:true // booleen, center horizontal               }, options);               return this.each(function() {                    var props = {position:'absolute'};                    if (options.vertical) {                         var top = ($(options.inside).height() - $(this).outerHeight()) / 2;                         if (options.withScrolling) top += $(options.inside).scrollTop() || 0;                         top = (top > options.minY ? top : options.minY);                         $.extend(props, {top: top+'px'});                    }                    if (options.horizontal) {                          var left = ($(options.inside).width() - $(this).outerWidth()) / 2;                          if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;                          left = (left > options.minX ? left : options.minX);                          $.extend(props, {left: left+'px'});                    }                    if (options.transition > 0) $(this).animate(props, options.transition);                    else $(this).css(props);                    return $(this);               });          }     });})(jQuery);

Activated by this code :

$(document).ready(function(){    $('#mainDiv').center();    $(window).bind('resize', function() {        $('#mainDiv').center({transition:300});    }););

is that right ?

UPDATE :

From CSS-Tricks

.center {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%); /* Yep! */  width: 48%;  height: 59%;}

I would recommend jQueryUI Position utility

$('your-selector').position({    of: $(window)});

which gives you much more possibilities than only centering ...