¿Cómo hago para configurar a <div>en el centro de la pantalla usando jQuery?

Me gusta agregar funciones a jQuery para que esta función ayude:

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

Ahora podemos escribir:

$(element).center();

Demostración: Fiddle (con parámetro agregado)

Pongo un plugin jquery aquí

VERSIÓN MUY CORTA

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

VERSION CORTA

(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);

Activado por este código:

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

VERSIÓN DE PLUGIN

(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);

Activado por este código:

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

está bien ?

ACTUALIZACIÓN

De CSS-Tricks

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

Recomendaría la utilidad jQueryUI Position

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

que te da muchas más posibilidades que solo centrar ...

Aquí está mi intento. Terminé usándolo para mi clon de Lightbox. La principal ventaja de esta solución es que el elemento permanecerá centrado automáticamente incluso si se cambia el tamaño de la ventana, lo que lo hace ideal para este tipo de uso.

$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}

Puede usar CSS solo para centrar así:

Ejemplo de trabajo

.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2); /* height divided by 2*/
    left:calc(50% - 50px/2); /* width divided by 2*/
}

<div class="center"></div>

calc() le permite hacer cálculos básicos en css.

Documentación de MDN para la calc()
tabla de soporte del navegador

Estoy ampliando la gran respuesta dada por @TonyL. Estoy agregando Math.abs () para ajustar los valores, y también tengo en cuenta que jQuery podría estar en modo "sin conflicto", como por ejemplo en WordPress.

Recomiendo que ajuste los valores superior e izquierdo con Math.abs () como lo he hecho a continuación. Si la ventana es demasiado pequeña y su cuadro de diálogo modal tiene un cuadro de cierre en la parte superior, esto evitará el problema de no ver el cuadro de cierre. La función de Tony habría tenido valores potencialmente negativos. Un buen ejemplo de cómo terminas con valores negativos es si tienes un cuadro de diálogo centrado grande pero el usuario final ha instalado varias barras de herramientas y / o ha aumentado su fuente predeterminada, en tal caso, el cuadro de cierre en un cuadro de diálogo modal (si en la parte superior) podría no ser visible y hacer clic.

La otra cosa que hago es acelerar esto un poco al almacenar en caché el objeto $ (ventana) para reducir los recorridos DOM adicionales y usar un CSS de clúster.

jQuery.fn.center = function ($) {
  var w = $(window);
  this.css({
    'position':'absolute',
    'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
    'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
  });
  return this;
}

Para usar, harías algo como:

jQuery(document).ready(function($){
  $('#myelem').center();
});

Yo usaría el interfaz de usuario jQuery position función.

Ver demostración de trabajo .

<div id="test" style="position:absolute;background-color:blue;color:white">
    test div to center in window
</div>

Si tengo un div con la identificación "test" para centrar, el siguiente script centrará el div en la ventana en el documento listo. (los valores predeterminados para "mi" y "en" en las opciones de posición son "centro")

<script type="text/javascript">
$(function(){
  $("#test").position({
     of: $(window)
  });
};
</script>

Me gustaría corregir un problema.

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

El código anterior no funcionará en los casos en que this.height(supongamos que el usuario cambia el tamaño de la pantalla y el contenido es dinámico) y scrollTop() = 0, por ejemplo:

window.heightes 600
this.heightes650

600 - 650 = -50  

-50 / 2 = -25

Ahora el cuadro está centrado -25fuera de la pantalla.

Esto no se ha probado, pero algo como esto debería funcionar.

var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 2)
});

No creo que tener una posición absoluta sea mejor si quieres un elemento siempre centrado en el medio de la página. Probablemente quieras un elemento fijo. Encontré otro plugin de centrado jquery que usaba posicionamiento fijo. Se llama centro fijo .

El componente de transición de esta función funcionó muy mal para mí en Chrome (no lo probé en otro lugar). Cambiaría el tamaño de la ventana un montón y mi elemento se movería lentamente, tratando de alcanzarlo.

Entonces, la siguiente función comenta esa parte. Además, agregué parámetros para pasar booleanos opcionales x e y, si desea centrar verticalmente pero no horizontalmente, por ejemplo:

// Center an element on the screen
(function($){
  $.fn.extend({
    center: function (x,y) {
      // var options =  $.extend({transition:300, minX:0, minY:0}, options);
      return this.each(function() {
                if (x == undefined) {
                    x = true;
                }
                if (y == undefined) {
                    y = true;
                }
                var $this = $(this);
                var $window = $(window);
                $this.css({
                    position: "absolute",
                });
                if (x) {
                    var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
                    $this.css('left',left)
                }
                if (!y == false) {
            var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();   
                    $this.css('top',top);
                }
        // $(this).animate({
        //   top: (top > options.minY ? top : options.minY)+'px',
        //   left: (left > options.minX ? left : options.minX)+'px'
        // }, options.transition);
        return $(this);
      });
    }
  });
})(jQuery);

Para centrar el elemento en relación con la ventana gráfica del navegador (ventana), no utilice position: absolute, el valor de posición correcto debe serfixed (absoluto significa: "El elemento se coloca en relación con su primer elemento ancestro (no estático)").

Esta versión alternativa del complemento central propuesto utiliza "%" en lugar de "px", por lo que cuando cambia el tamaño de la ventana, el contenido se mantiene centrado:

$.fn.center = function () {
    var heightRatio = ($(window).height() != 0) 
            ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) 
            ? this.outerWidth() / $(window).width() : 1;

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

Debe poner margin: 0para excluir los márgenes de contenido del ancho / alto (ya que estamos usando la posición fija, tener márgenes no tiene sentido). De acuerdo con el documento jQuery usando.outerWidth(true) debe incluir márgenes, pero no funcionó como se esperaba cuando lo intenté en Chrome.

El 50*(1-ratio)viene de:

Ancho de la ventana: W = 100%

Ancho del elemento (en%): w = 100 * elementWidthInPixels/windowWidthInPixels

Para calcular la izquierda centrada:

 left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)

Esto es genial. Agregué una función de devolución de llamada

center: function (options, callback) {

if (options.transition > 0) {
   $(this).animate(props, options.transition, callback);
} else { 
    $(this).css(props);
   if (typeof callback == 'function') { // make sure the callback is a function
       callback.call(this); // brings the scope to the callback
   }
}

Editar:

Si la pregunta me enseñó algo, es esto: no cambies algo que ya funciona :)

Estoy proporcionando una copia (casi) literal de cómo se manejó esto en http://www.jakpsatweb.cz/css/css-vertical-center-solution.html : está muy pirateado para IE, pero proporciona una forma pura de CSS de respondiendo la pregunta:

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

Violín: http://jsfiddle.net/S9upd/4/

He corrido esto a través de los navegadores y parece estar bien; si no es por nada más, mantendré el original a continuación para que el manejo del porcentaje de margen según lo dictado por las especificaciones CSS vea la luz del día.

Original:

¡Parece que llego tarde a la fiesta!

Hay algunos comentarios anteriores que sugieren que esta es una pregunta CSS: separación de preocupaciones y todo. Permítanme comenzar esto diciendo que CSS realmente se disparó en el pie en este caso. Quiero decir, qué fácil sería hacer esto:

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

¿Derecha? La esquina superior izquierda del contenedor estaría en el centro de la pantalla, y con márgenes negativos, ¡el contenido reaparecerá mágicamente en el centro absoluto de la página! http://jsfiddle.net/rJPPc/

¡Incorrecto! El posicionamiento horizontal está bien, pero verticalmente ... Oh, ya veo. Aparentemente en css, cuando se configuran los márgenes superiores en%, el valor se calcula como un porcentaje siempre relativo al ancho del bloque contenedor . ¡Como manzanas y naranjas! Si no confías en mí o en Mozilla doco, juega con el violín de arriba ajustando el ancho del contenido y sorpréndete.

Ahora, con CSS como mi pan de cada día, no estaba dispuesto a rendirme. Al mismo tiempo, prefiero las cosas fáciles, así que tomé prestados los hallazgos de un gurú checo de CSS y lo convertí en un violín que funciona. Para resumir, creamos una tabla en la que la alineación vertical se establece en el medio:

<table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

Y que la posición del contenido está afinada con un buen margen antiguo : 0 automático; :

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​

Violín de trabajo según lo prometido: http://jsfiddle.net/teDQ2/

Lo que tengo aquí es un método de "centro" que garantiza que el elemento que está intentando centrar no solo es de posicionamiento "fijo" o "absoluto", sino que también garantiza que el elemento que está centrando es más pequeño que su padre, este centro y el elemento relativo a es padre, si los elementos padre son más pequeños que el elemento en sí, saqueará el DOM al siguiente padre y lo centrará en relación con eso.

$.fn.center = function () {
        /// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>

        var element = $(this),
            elementPos = element.css('position'),
            elementParent = $(element.parent()),
            elementWidth = element.outerWidth(),
            parentWidth = elementParent.width();

        if (parentWidth <= elementWidth) {
            elementParent = $(elementParent.parent());
            parentWidth = elementParent.width();
        }

        if (elementPos === "absolute" || elementPos === "fixed") {
            element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
        }
    };

yo uso esto:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});

Por favor use esto:

$(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});

// To initially run the function:
$(window).resize();

está obteniendo esa transición pobre porque está ajustando la posición del elemento cada vez que se desplaza el documento. Lo que quieres es usar posicionamiento fijo. Probé el complemento de centro fijo mencionado anteriormente y parece que resuelve bien el problema. El posicionamiento fijo le permite centrar un elemento una vez, y la propiedad CSS se encargará de mantener esa posición por usted cada vez que se desplace.

Aquí está mi versión. Puedo cambiarlo después de ver estos ejemplos.

$.fn.pixels = function(property){
    return parseInt(this.css(property));
};

$.fn.center = function(){
    var w = $($w);
    return this.each(function(){
        $(this).css("position","absolute");
        $(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
        $(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
    });
};

No necesito jquery para esto

Usé esto para centrar el elemento Div. Estilo css,

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

Elemento abierto

$(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});

MI ACTUALIZACIÓN A LA RESPUESTA DE TONY L Esta es la versión modificada de su respuesta que uso religiosamente ahora. Pensé en compartirlo, ya que agrega un poco más de funcionalidad para varias situaciones que pueda tener, como diferentes tipos deposition o solo querer un centrado horizontal / vertical en lugar de ambos.

center.js:

// We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

En mi <head>:

<script src="scripts/center.js"></script>

Ejemplos de uso:

$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")

Funciona con cualquier tipo de posicionamiento, y puede usarse fácilmente en todo su sitio, así como fácilmente transportable a cualquier otro sitio que cree. No más soluciones molestas para centrar algo correctamente.

¡Espero que esto sea útil para alguien por ahí! Disfrutar.

Muchas formas de hacer esto. Mi objeto se mantiene oculto con pantalla: ninguno dentro de la etiqueta BODY para que el posicionamiento sea relativo al BODY. Después de usar $ ("# object_id"). Show () , llamo $ ("# object_id"). Center ()

Yo uso position: absolute porque es posible, especialmente en un dispositivo móvil pequeño, que la ventana modal sea más grande que la ventana del dispositivo, en cuyo caso parte del contenido modal podría ser inaccesible si el posicionamiento fuera fijo.

Aquí está mi sabor basado en las respuestas de otros y mis necesidades específicas:

$.fn.center = function () {
        this.css("position","absolute");

        //use % so that modal window will adjust with browser resizing
        this.css("top","50%");
        this.css("left","50%");

        //use negative margin to center
        this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
        this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");

        //catch cases where object would be offscreen
        if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
        if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});

        return this;
    };

Puede usar la translatepropiedad CSS :

position: absolute;
transform: translate(-50%, -50%);

Lea esta publicación para más detalles.

Normalmente, haría esto solo con CSS ... pero como usted le pidió una forma de hacerlo con jQuery ...

El siguiente código centra un div tanto horizontal como verticalmente dentro de su contenedor:

$("#target").addClass("centered-content")
            .wrap("<div class='center-outer-container'></div>")
            .wrap("<div class='center-inner-container'></div>");

body {
    margin : 0;
    background: #ccc;
}

.center-outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
}

.center-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

(ver también este violín )

Solución CSS solo en dos líneas

Centraliza tu div interior horizontal y verticalmente.

#outer{
  display: flex;
}
#inner{
margin: auto;

}

solo para alineación horizontal, cambie

margin: 0 auto;

y para vertical, cambio

margin: auto 0;

Simplemente diga: $ ("# divID"). Html ($ (''). Html ($ ("# divID"). Html ()));

¿Por qué no usas CSS para centrar un div?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}