Usar jQuery para centrar un DIV en la pantalla

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

preguntado Oct 16 '08, 22:10

Esta es más una pregunta de CSS que una pregunta de jQuery. Puede usar los métodos jQuery para ayudarlo a encontrar el posicionamiento entre navegadores y aplicar los estilos CSS adecuados a un elemento, pero la esencia de la pregunta es cómo centrar un div en la pantalla usando CSS. -

Si está centrando un div en la pantalla, es posible que esté usando el posicionamiento FIJO. ¿Por qué no hacer esto? stackoverflow.com/questions/2005954/…. La solución es CSS puro, no requiere javascript. -

De acuerdo, el método JavaScript no es tan amigable en absoluto. Especialmente entre navegadores. -

28 Respuestas

Me gusta agregar funciones a jQuery, por lo que esta función ayudaría:

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 simplemente escribir:

$(element).center();

Demostración: Violín (con parámetro agregado)

Respondido el 26 de enero de 14 a las 11:01

Sugeriría un cambio: debería usar this.outerHeight () y this.outerWidth () en lugar de solo this.height () y this.width (). De lo contrario, si el objeto tiene un borde o relleno, terminará ligeramente descentrado. - Trevor Burnham

¿Por qué no es esto una parte nativa de la funcionalidad de jQuery? - Seth Carnegie

¿Qué pasa si no quiero centrarme en el contenido <div> en lugar de <body>? Tal vez deberías cambiar window a this.parent() o agregue un parámetro para ello. - Derek 朕 會 功夫

El código en la respuesta debe usar "posición: fija" ya que "absoluto" se calcula a partir del primer padre relativo, y el código usa la ventana para calcular el centro. - Diego

También sugeriría agregar soporte para que cuando se cambie el tamaño de la ventana, ajuste el elemento en la página. Actualmente se mantiene con las dimensiones originales. - red web

Yo puse un complemento 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 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:

Desde Trucos CSS

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

Respondido el 20 de junio de 20 a las 10:06

Su función funcionó perfectamente bien para un centro vertical. No parece funcionar para un centro horizontal. - Halsafar

El CSS asume que conoce el tamaño (al menos porcentajes) del div centrado, mientras que jQuery funciona como sea. - Dunc

Mi voto es CSS, mucho más sencillo y no necesita ningún script Java sofisticado. Si usa fijo en lugar de absoluto, permanecerá en el centro de la página incluso cuando el usuario se desplace por la ventana del navegador. user1616338

yo recomendaria Utilidad de posición jQueryUI

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

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

Respondido el 10 de diciembre de 10 a las 11:12

@Timwi - ¿Está seguro de que se está centrando en la ventana frente al documento? - Keithhackbarth

TypeError: $ (...). Position no es una función - Michelangelo

@ Michelangelo: Necesita la biblioteca jqueryUI para usar .position () como función. Echa un vistazo a: api.jqueryui.com/position/ - jake

Ese fragmento es el mejor: D. Pero tenga en cuenta que el elemento debe ser "visible". - Cԃ ա ԃ

Aquí está mi camino. 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 la 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;
}

contestado el 16 de mayo de 13 a las 07:05

Creo que esto funciona bien ... salió mal en mi caso debido al uso de diseño receptivo: el ancho de mi div cambia a medida que cambia el ancho de la pantalla. Lo que funciona perfectamente es la respuesta de Tony L y luego agrega esto: $(window).resize(function(){$('#mydiv').center()}); (mydiv es un cuadro de diálogo modal, por lo que cuando está cerrado, elimino el controlador de eventos de cambio de tamaño). cocinero darren

A veces es posible que desee utilizar outerWidth() y outerHeight() considerar el relleno y el ancho del borde. - Felipe Gerber

Esto funciona perfectamente para mí para proyectos heredados con doc type 5 donde $(window).height() da 0. Pero he cambiado de posición a "absoluta". - Mike

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 calc()
Tabla de soporte del navegador

Respondido 31 Oct 14, 15:10

Tenga en cuenta que calc () no es compatible con IE8 si necesita admitir que el navegador use la estrategia del centro jquery. - mbokil

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.

Te recomiendo que envuelvas los valores superior e izquierdo con Math.abs () como 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 termina con valores negativos es si tiene un cuadro de diálogo grande centrado 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) puede que no sea visible y no se pueda hacer clic.

La otra cosa que hago es acelerar esto un poco almacenando en caché el objeto $ (ventana) para reducir los recorridos de DOM adicionales, y uso 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, deberías hacer algo como:

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

Respondido 17 ago 12, 06:08

Me gustan tus mejoras; sin embargo, todavía hay un problema que encontré dependiendo del comportamiento exacto que esté buscando. Los abdominales funcionarán muy bien solo si el usuario se desplaza completamente hacia la parte superior e izquierda; de lo contrario, el usuario tendrá que desplazarse por la ventana del navegador para llegar a la barra de título. Para resolver ese problema, opté por hacer una simple declaración if como esta: if (top < w.scrollTop()) top = w.scrollTop(); junto con el equivalente de left. Una vez más, esto proporciona un comportamiento diferente que puede ser deseable o no. - Alex Jorgenson

Usaría el jQuery UI position función.

Ver demostración funcional.

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

Si tengo un div con id "test" en el centro, la siguiente secuencia de comandos centraría el div en la ventana del 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>

Respondido 03 Feb 15, 12:02

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() = 0ejemplo:

window.height is 600
this.height is 650

600 - 650 = -50  

-50 / 2 = -25

Ahora la caja esta centrada -25 fuera de la pantalla.

Respondido 03 Feb 15, 12:02

Esto no está probado, pero algo como esto debería funcionar.

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

Respondido 17 Oct 08, 04:10

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

Respondido 03 Jul 10, 10:07

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 deslizaría lentamente, tratando de ponerse al día.

Entonces, la siguiente función comenta esa parte. Además, agregué parámetros para pasar booleanos x e y opcionales, 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);

respondido 31 mar '10, 13:03

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

Esta versión alternativa del complemento del centro propuesto usa "%" 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;
}

Necesitas poner margin: 0 para excluir los márgenes de contenido del ancho / alto (dado que estamos usando la posición fija, tener márgenes no tiene sentido). Según el documento de jQuery usando .outerWidth(true) debería incluir márgenes, pero no funcionó como se esperaba cuando probé en Chrome.

La 50*(1-ratio) viene de:

Ancho de ventana: W = 100%

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

Ellos para calcular la izquierda centrada:

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

Respondido el 06 de junio de 12 a las 17:06

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

Respondido el 23 de diciembre de 16 a las 09:12

Edit:

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

Proporciono una copia (casi) literal de cómo se manejó esto http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - está muy pirateado para IE, pero proporciona una forma pura de CSS de responder 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 ejecutado esto a través de capturas de navegador y parece estar bien; si no es por otra cosa, guardaré el original a continuación para que el manejo del porcentaje de margen según lo dictado por las especificaciones de 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 de CSS: separación de preocupaciones y todo. Permítanme comenzar esto diciendo que CSS democracia se disparó en el pie en este. 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/

Wrong! El posicionamiento horizontal está bien, pero verticalmente ... Oh, ya veo. Aparentemente en css, al configurar los márgenes superiores en%, el valor se calcula como un porcentaje siempre relativo al anchura del bloque contenedor. ¡Como manzanas y naranjas! Si no confía en mí o en Mozilla doco, juegue con el violín anterior ajustando el ancho del contenido y sorpréndase.


Ahora, con CSS como mi pan y mantequilla, no estaba dispuesto a rendirme. Al mismo tiempo, prefiero las cosas fáciles, así que he tomado prestados los hallazgos de un Gurú de CSS checo y lo convirtió en un violín funcional. En pocas palabras, 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 los buenos viejos margen: 0 automático;:

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

Violín de trabajo como se prometió: http://jsfiddle.net/teDQ2/

contestado el 01 de mayo de 19 a las 18:05

El problema es que no está centrado. - Konrad Borowski

@GlitchMr: Me gustaría volver a verificar la caja de trabajo mañana, pero el segundo violín funcionó bien en Chrome / Safari Mac - ov

Bien, he comprobado en Chrome, Firefox e Internet Explorer 8+ (IE7 no funciona) y funciona. Pero no funciona en Opera ... y eso es muy extraño considerando que es CSS simple y funciona en otros navegadores. - Konrad Borowski

@GlitchMr: gracias por estar atento a una pregunta tan antigua. Actualicé el enlace de violín de arriba para mostrar una respuesta "correcta" - avíseme si funciona para usted (o voten en contra del olvido. ¡Tuve mi oportunidad! :) - ov

Je, todo lo que haré es no votar a menos que se muestre la respuesta adecuada (actualmente todavía no funciona en Opera, pero creo que es un error del navegador) ... oh, espera ... funciona si cambio el tamaño de la ventana y no si cambiaré el tamaño de las ventanas en JSFiddle. Entonces, funciona :). Siento esto. Pero aún así, debe advertir que no funciona en IE7. +1. Ah, y creo que funciona en IE6 ... - Konrad Borowski

Lo que tengo aquí es un método de "centro" que garantiza que el elemento que está intentando centrar no solo sea de posicionamiento "fijo" o "absoluto", sino que también garantiza que el elemento que está centrando sea más pequeño que su elemento principal, esto se centra y el elemento relativo a es padre, si el elemento padre es más pequeño que el elemento mismo, saqueará el DOM al siguiente padre y lo centrará en relación con ese.

$.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');
        }
    };

Respondido 14 ago 13, 14:08

yo uso esto:

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

respondido 01 nov., 15:12

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

respondido 19 mar '16, 21:03

Solución CSS En dos líneas solamente

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, cambiar

margin: auto 0;

Respondido el 23 de Septiembre de 20 a las 15:09

está obteniendo esa mala transición 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 el problema muy bien. 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.

Respondido 07 Jul 10, 19:07

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

Respondido el 04 de junio de 12 a las 15:06

No es necesario 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);
    });

});

Respondido 17 Oct 13, 11:10

¿Olvidó incluir el html en su respuesta? - paquet

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

centro.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 se puede usar en todo su sitio fácilmente, así como también se puede transportar fácilmente a cualquier otro sitio que cree. No más soluciones molestas para centrar algo correctamente.

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

Respondido 23 Jul 15, 16:07

Hay muchas formas de hacer esto. Mi objeto se mantiene oculto con pantalla: ninguna justo dentro de la etiqueta BODY para que el posicionamiento sea relativo al BODY. Después de usar $ ("# object_id"). show (), Yo lo llamo $ ("# object_id"). center ()

yo suelo posición: absoluta 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;
    };

Respondido 01 Oct 15, 00:10

Podrías usar el CSS translate propiedad:

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

Lee esta publicación para más información.

Respondido 27 Feb 16, 17:02

Para algo así, querrá configurar su left: 50% y top: 50% luego puede usar la traducción de transformación para cambiar su punto central correctamente. Sin embargo, con este método, los navegadores como Chrome distorsionarán / desenfocarán su texto posteriormente, lo que no suele ser deseable. Es mejor tomar el ancho / alto de la ventana y luego colocar la izquierda / arriba en función de eso en lugar de jugar con la transformación. Evita la distorsión y funciona en todos los navegadores en los que lo he probado. - Fata1Err0r

Normalmente, haría esto solo con CSS ... pero como le preguntó una forma de hacer esto 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>

(Véase también este violín)

respondido 16 mar '16, 16:03

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

Respondido el 14 de enero de 20 a las 08:01

Se puede hacer con solo CO. Pero preguntaron con jQuery o JavaScript

Aquí, usa CSS Flex box propiedad para alinear el centro div.

body.center{
  display:flex;
  align-items:center; // Vertical alignment
  justify-content:center; // Horizontal alignment
}

alinear-elementos: centro; - utilizado para alinear verticalmente.

justificar-contenido: centro; - utilizado para alinear horizontalmente.

document.querySelector("body").classList.add("center");
body {
  margin : 0;
  height:100vh;
  width:100%;
  background: #ccc;
}
#main{
  background:#00cc00;
  width:100px;
  height:100px;
}
body.center{
  display:flex;
  align-items:center;
  justify-content:center;
}
<body>
  <div id="main"></div>
</body>

Respondido el 23 de Septiembre de 20 a las 15:09

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

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

Respondido 26 Jul 11, 23:07

En su ejemplo, la parte superior / izquierda del div estará donde se supone que está el centro. - Cristi Mihai

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.