Using jQuery to center a DIV on the screen

Question

How do I go about setting a <div> in the center of the screen using jQuery?

Answer 1

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)

Answer 2

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%; }