Usando jQuery para centrar un DIV en la pantalla

760

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

Craig
fuente
20
Esta es más una pregunta CSS que una pregunta 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.
Chris MacDonald
Aquí hay un complemento más. alexandremagno.net/jquery/plugins/center
Ivailo Bardarov 01 de
2
Si está centrando un div en la pantalla, es posible que esté utilizando el posicionamiento FIJO. ¿Por qué no hacer esto? Stackoverflow.com/questions/2005954/… . La solución es CSS puro, no requiere JavaScript.
Ardee Aram
De acuerdo, el método JavaScript no es tan amigable en absoluto. Especialmente navegador cruzado.
Simon Hayter

Respuestas:

1070

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)

Tony L.
fuente
78
Un cambio que sugeriría: debe 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 el
82
¿Por qué no es esto una parte nativa de la funcionalidad de jQuery?
Seth Carnegie
14
¿Qué sucede si no quiero centrarme en el contenido en <div>lugar de <body>? Tal vez debería cambiar windowa this.parent()o añadir un parámetro para ello.
Derek 朕 會 功夫
13
El código en la respuesta debe usar "posición: fijo" ya que "absoluto" se calcula a partir del primer padre relativo, y el código usa la ventana para calcular el centro.
Diego
2
También sugeriría agregar soporte para que cuando se redimensione la ventana se ajuste el elemento en la página. Actualmente se mantiene con las dimensiones originales.
Webnet
143

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%;
}
molokoloco
fuente
Su función funcionó perfectamente bien para un centro vertical. No parece funcionar para un centro horizontal.
Halsafar
El CSS supone que conoce el tamaño (porcentajes al menos) del div centrado, mientras que jQuery funciona lo que sea.
Dunc
Mi voto es CSS, mucho más directo 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
60

Recomendaría la utilidad jQueryUI Position

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

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

cetnar
fuente
1
@Timwi: ¿estás seguro de que estás centrado en la ventana frente al documento?
keithhackbarth
1
TypeError: $ (...). Position no es una función
Michelangelo
3
@Michelangelo: necesita la biblioteca jqueryUI para usar .position () como función. Echa un vistazo: api.jqueryui.com/position/
jake
Ese fragmento es el mejor: D. Pero tenga en cuenta que el elemento debe ser "visible".
Cԃ ա ԃ
39

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;
}
Juho Vepsäläinen
fuente
3
Creo que esto funciona bien ... salió mal en mi caso debido al uso del 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 diálogo modal, así que cuando está cerrado elimino el controlador de eventos de cambio de tamaño).
Darren Cook
1
A veces es posible que desee utilizar outerWidth()y outerHeight()considerar el relleno y el ancho del borde.
Philippe Gerber
Esto funciona perfectamente para mí para proyectos heredados con doc tipo 5 donde $(window).height()da 0. Pero he cambiado de posición a 'absoluto'.
Mykhaylo Adamovych
26

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

apaul
fuente
Tenga en cuenta que calc () no es compatible con IE8 si necesita admitir que el navegador use la estrategia jquery center.
mbokil
14

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();
});
Volomike
fuente
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 arriba y hacia la izquierda; de lo contrario, el usuario tendrá que desplazar la ventana del navegador para llegar a la barra de título. Para resolver ese problema, opté por hacer una declaración if simple como esta: if (top < w.scrollTop()) top = w.scrollTop();junto con el equivalente de left. Nuevamente, esto proporciona un comportamiento diferente que puede o no ser deseable.
Alex Jorgenson
11

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>
andy_edward
fuente
8

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.

John Butcher
fuente
6

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)
});
Andrew Hedges
fuente
6

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 .

Fred
fuente
4

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);
Eric D. Fields
fuente
4

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)
Diego
fuente
4

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
   }
}
Keith
fuente
4

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/

ov
fuente
1
El problema es que no está centrado.
Konrad Borowski
@ GlitchMr: Me gustaría comprobar dos veces en la caja de trabajo mañana, pero el segundo violín funcionó bien en Chrome / Safari Mac
ov
Bien, he verificado Chrome, Firefox e Internet Explorer 8+ (IE7 no funciona) y funciona. Pero no funciona en Opera ... y eso es muy extraño teniendo en cuenta que es CSS simple y funciona en otros navegadores.
Konrad Borowski
@ GlitchMr: gracias por vigilar una pregunta tan antigua. He actualizado el enlace de violín de arriba para mostrar una respuesta "correcta". Avíseme si funciona para usted (o vote hacia el olvido. ¡He tenido 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 redimensionaré la ventana y no si voy a cambiar el tamaño de Windows en JSFiddle sí mismo. Entonces, funciona :). Siento esto. Pero aún así, debe poner advertencia de que no funciona en IE7. +1. Ah, y creo que funciona en IE6 ...
Konrad Borowski
3

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');
        }
    };
Ryan
fuente
2

yo uso esto:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});
Holden
fuente
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();
satya
fuente
0

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.

skaterdav85
fuente
0

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

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

});
Sajitha Rathnayake
fuente
¿Olvidaste incluir el html en tu respuesta?
Ben
0

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.

Fata1Err0r
fuente
0

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;
    };
I a
fuente
0

Puede usar la translatepropiedad CSS :

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

Lea esta publicación para más detalles.

Fred K
fuente
1
Para algo así, querrá establecer 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 después, lo que generalmente no es deseable. Es mejor tomar el ancho / alto de la ventana, y luego colocar el lado izquierdo / superior 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
0

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 )

John Slegers
fuente
0

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;
Shivam Chhetri
fuente
0

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

1.618
fuente
-6

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

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
} 
ahmad balavipour
fuente
2
En su ejemplo, la parte superior / izquierda del div estará donde se supone que debe estar el centro.
Cristi Mihai