Usando o jQuery para centralizar um DIV na tela

760

Como faço para definir um <div>no centro da tela usando o jQuery?

Craig
fonte
20
Esta é mais uma questão de CSS do que uma questão de jQuery. Você pode usar os métodos jQuery para ajudá-lo a encontrar o posicionamento entre navegadores e aplicar os estilos CSS apropriados a um elemento, mas a essência da questão é como centralizar uma div na tela usando CSS.
Chris MacDonald
Aqui está mais um plugin. alexandremagno.net/jquery/plugins/center
Ivailo Bardarov
2
Se você estiver centralizando uma div na tela, pode estar usando o posicionamento FIXO. Por que não fazer isso apenas: stackoverflow.com/questions/2005954/… . A solução é CSS puro, não requer javascript.
Ardee Aram
Concordo, o método JavaScript não é nada amigável. Especialmente entre navegadores.
Simon Hayter

Respostas:

1070

Eu gosto de adicionar funções ao jQuery, então essa função ajudaria:

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

Agora podemos escrever:

$(element).center();

Demo: Fiddle (com parâmetro adicionado)

Tony L.
fonte
78
Uma alteração que eu sugeriria: você deve usar this.outerHeight () e this.outerWidth () em vez de apenas this.height () e this.width (). Caso contrário, se o objeto tiver uma borda ou preenchimento, ele terminará levemente descentralizado.
Trevor Burnham
82
Por que isso não é uma parte nativa da funcionalidade do jQuery?
Seth Carnegie
14
E se eu não quiser centralizar a contenção em <div>vez de <body>? Talvez você deve mudar windowpara this.parent()ou adicionar um parâmetro para isso.
Derek respondeu
13
O código na resposta deve usar "position: fixed", pois "absoluto" é calculado a partir do primeiro pai relativo, e o código usa a janela para calcular o centro.
Diego
2
Eu também sugeriria adicionar suporte para que, quando a janela for redimensionada, ajuste o elemento na página. Atualmente permanece com as dimensões originais.
Webnet 16/07/12
143

Eu coloquei um plugin jquery aqui

VERSÃO MUITO CURTA

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

VERSÃO CURTA

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

Ativado por este código:

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

VERSÃO 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);

Ativado por este código:

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

Isso está certo ?

ATUALIZAÇÃO:

De CSS-Tricks

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}
molokoloco
fonte
Sua função funcionou perfeitamente bem para um centro vertical. Parece não funcionar para um centro horizontal.
precisa saber é o seguinte
O CSS supõe que você saiba o tamanho (pelo menos porcentagens) da div centralizada, enquanto o jQuery funciona de qualquer maneira.
Dunc 22/01
Meu voto é CSS - muito mais direto e não precisa de nenhum script Java sofisticado. Se você usar fixo em vez de absoluta que ele vai ficar no centro da página, mesmo quando o usuário rola a janela do navegador
user1616338
60

Eu recomendaria o utilitário jQueryUI Position

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

o que lhe dá muito mais possibilidades do que apenas centralizar ...

cetnar
fonte
1
@ Timwi - Tem certeza de que está centralizando na janela versus documento?
keithhackbarth
1
TypeError: $ (...). Position não é função
Michelangelo
3
@ Michelangelo: Você precisa da biblioteca jqueryUI para usar .position () como uma função. Confira: api.jqueryui.com/position/
jake
Esse trecho é o melhor: D. Mas lembre-se de que o elemento deve ser "visível".
Cԃ ա ԃ
39

Aqui está a minha chance. Acabei usando-o para o meu clone do Lightbox. A principal vantagem dessa solução é que o elemento permanecerá centralizado automaticamente, mesmo se a janela for redimensionada, tornando-o ideal para esse 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
fonte
3
Eu acho que isso funciona bem ... deu errado no meu caso por causa do uso de design responsivo: a largura do meu div muda conforme a largura da tela. O que funciona perfeitamente é Tony L's resposta e, em seguida, acrescentar o seguinte: $(window).resize(function(){$('#mydiv').center()}); (mydiv é um diálogo modal, então quando ele é fechado para remover o manipulador de eventos de redimensionamento.)
Darren Cozinhe
1
Às vezes, você pode querer usar outerWidth()e outerHeight()considerar o preenchimento e a largura da borda.
Philippe Gerber
Isso funciona perfeitamente para mim no projeto legado com o tipo de documento 5, onde $(window).height()dá 0. Mas mudei de posição para 'absoluto'.
Mykhaylo Adamovych
26

Você pode usar CSS sozinho para centralizar da seguinte maneira:

Exemplo de trabalho

.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() permite fazer cálculos básicos em css.

calc()Tabela de suporte da documentação MDN para
navegador

apaul
fonte
Lembre-se de que calc () não é suportado no IE8 se você precisar suportar esse navegador usando a estratégia do jquery center.
mbokil
14

Estou expandindo a ótima resposta dada por @TonyL. Estou adicionando Math.abs () para agrupar os valores e também levo em conta que o jQuery pode estar no modo "sem conflito", como, por exemplo, no WordPress.

Eu recomendo que você agrupe os valores superior e esquerdo com Math.abs (), como fiz abaixo. Se a janela for muito pequena e sua caixa de diálogo modal tiver uma caixa fechada na parte superior, isso impedirá o problema de não ver a caixa fechada. A função de Tony teria valores potencialmente negativos. Um bom exemplo de como você acaba com valores negativos é se você tiver uma grande caixa de diálogo centralizada, mas o usuário final instalou várias barras de ferramentas e / ou aumentou sua fonte padrão - nesse caso, a caixa de fechamento de uma caixa de diálogo modal (se na parte superior) pode não estar visível e clicável.

A outra coisa que faço é acelerar um pouco isso, armazenando em cache o objeto $ (window) para reduzir os desvios de DOM adicionais e usar um CSS de cluster.

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, você faria algo como:

jQuery(document).ready(function($){
  $('#myelem').center();
});
Volomike
fonte
Eu gosto das suas melhorias; no entanto, ainda existe um problema, dependendo do comportamento exato que você está procurando. Os abdominais funcionarão muito bem apenas se o usuário estiver totalmente rolado para cima e para a esquerda, caso contrário, o usuário terá que rolar a janela do navegador para chegar à barra de título. Para resolver esse problema, optei por fazer uma declaração if simples como esta: if (top < w.scrollTop()) top = w.scrollTop();junto com o equivalente à esquerda. Novamente, isso fornece um comportamento diferente que pode ou não ser desejável.
Alex Jorgenson
11

Eu usaria a função UI do jQueryposition .

Veja demonstração de trabalho .

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

Se eu tiver uma div com id "test" para centralizar, o script a seguir centralizaria a div na janela no documento pronto. (os valores padrão para "meu" e "em" nas opções de posição são "centro")

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

Gostaria de corrigir um problema.

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

O código acima não funcionará nos casos em que this.height((suponha que o usuário redimensione a tela e o conteúdo seja dinâmico) e scrollTop() = 0, por exemplo:

window.heighté 600
this.heighté650

600 - 650 = -50  

-50 / 2 = -25

Agora a caixa está centralizada -25fora da tela.

John Butcher
fonte
6

Isso não foi testado, mas algo assim deve funcionar.

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

Eu não acho que ter uma posição absoluta seria melhor se você quiser um elemento sempre centralizado no meio da página. Você provavelmente quer um elemento fixo. Encontrei outro plugin de centralização de jquery que usava posicionamento fixo. É chamado centro fixo .

Fred
fonte
4

O componente de transição dessa função funcionou muito mal para mim no Chrome (não foi testado em outro lugar). Eu redimensionava muito a janela e meu elemento se movia lentamente, tentando recuperar o atraso.

Portanto, a seguinte função comenta essa parte. Além disso, adicionei parâmetros para passar booleanos x e y opcionais, se você deseja centralizar verticalmente, mas não horizontalmente, por exemplo:

// 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
fonte
4

Para centralizar o elemento em relação à janela de exibição do navegador (janela), não use position: absolute, o valor correto da posição deve serfixed (significa absoluto: "O elemento está posicionado em relação ao seu primeiro elemento ancestral posicionado (não estático)").

Esta versão alternativa do plug-in central proposto usa "%" em vez de "px". Assim, quando você redimensiona a janela, o conteúdo é centralizado:

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

Você precisa colocar margin: 0para excluir as margens do conteúdo da largura / altura (já que estamos usando a posição fixa, ter margens não faz sentido). De acordo com o documento jQuery, usando.outerWidth(true) deve incluir margens, mas não funcionou como esperado quando tentei no Chrome.

O 50*(1-ratio)vem de:

Largura da janela: W = 100%

Largura do elemento (em%): w = 100 * elementWidthInPixels/windowWidthInPixels

Para calcular a esquerda centralizada:

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

Isso é ótimo. Eu adicionei uma função de retorno de chamada

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
fonte
4

Editar:

Se a pergunta me ensinou alguma coisa, é esta: não mude algo que já funcione :)

Estou fornecendo uma cópia (quase) literal de como isso foi tratado em http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - ele foi fortemente invadido pelo IE, mas fornece uma maneira CSS pura de respondendo à pergunta:

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

Fiddle: http://jsfiddle.net/S9upd/4/

Eu executei isso através de browsershots e parece bom; se por nada mais, manterei o original abaixo, para que o tratamento da porcentagem da margem, conforme determinado pelas especificações CSS, veja a luz do dia.

Original:

Parece que estou atrasado para a festa!

Existem alguns comentários acima que sugerem que essa é uma questão de CSS - separação de preocupações e tudo. Permitam-me que anteceda isso dizendo que o CSS realmente deu um tiro no pé neste. Quero dizer, quão fácil seria fazer isso:

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

Direita? O canto superior esquerdo do contêiner estaria no centro da tela e, com margens negativas, o conteúdo reaparecerá magicamente no centro absoluto da página! http://jsfiddle.net/rJPPc/

Errado! O posicionamento horizontal é bom, mas verticalmente ... Entendo. Aparentemente, em css, ao definir as margens superiores em%, o valor é calculado como uma porcentagem sempre relativa à largura do bloco que o contém . Como maçãs e laranjas! Se você não confia em mim ou no Mozilla Doco, brinque com o violino acima, ajustando a largura do conteúdo e se surpreenda.


Agora, com CSS sendo meu pão com manteiga, eu não estava prestes a desistir. Ao mesmo tempo, prefiro as coisas fáceis, por isso peguei emprestadas as descobertas de um guru tcheco do CSS e a transformei em um violino. Para encurtar a história, criamos uma tabela na qual o alinhamento vertical é definido como o meio:

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

E a posição do conteúdo é ajustada com boa margem antiga : 0 automático; :

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

Violino de trabalho conforme prometido: http://jsfiddle.net/teDQ2/

ov
fonte
1
O problema é que não está centrado.
precisa
@GlitchMr: Eu gostaria de verificar novamente na caixa de trabalho amanhã, mas o segundo violino funcionou muito bem no Chrome / Safari Mac
ov
Certo, verifiquei o Chrome, Firefox e Internet Explorer 8+ (o IE7 não funciona) e funciona. Mas não funciona no Opera ... e isso é muito estranho, considerando que é CSS simples e funciona em outros navegadores.
Konrad Borowski
@ GlitchMr: obrigado por ficar de olho em uma pergunta tão antiga. Eu atualizei o link violino acima para mostrar uma resposta "correta" - deixe-me saber se ele funciona para você (ou downvote no esquecimento Eu tive minha chance :).!
ov
Heh, tudo o que vou fazer é não votar, a menos que a resposta correta seja exibida (atualmente ainda não funciona no Opera, mas acho que é um bug do navegador) ... oh espera ... funciona se eu redimensionar a janela e não se eu redimensionar janelas no próprio JSFiddle. Então, funciona :). Me desculpe por isso. Mas, ainda assim, você deve colocar um aviso de que não funciona no IE7. +1. Oh, e eu acho que funciona no IE6 ...
Konrad Borowski
3

O que eu tenho aqui é um método "central" que garante que o elemento que você está tentando centralizar não seja apenas de posicionamento "fixo" ou "absoluto", mas também garante que o elemento que você está centralizando seja menor que o pai, esse centro e o elemento relativo a é pai, se o elemento pai for menor que o próprio elemento, ele empilha o DOM para o próximo pai e o centraliza em relação a isso.

$.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
fonte
2

Eu uso isso:

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

Por favor use isto:

$(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
fonte
0

você está sofrendo uma transição ruim porque está ajustando a posição do elemento toda vez que o documento é rolado. O que você deseja é usar o posicionamento fixo. Eu tentei o plugin do centro fixo listado acima e isso parece resolver o problema muito bem. O posicionamento fixo permite centralizar um elemento uma vez, e a propriedade CSS cuidará de manter essa posição sempre que você rolar.

skaterdav85
fonte
0

Aqui está a minha versão. Eu posso mudar depois de olhar para esses exemplos.

$.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
fonte
0

Não é necessário jquery para isso

Eu usei isso para centralizar o 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 aberto

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

});
Sajitha Rathnayake
fonte
Você esqueceu de incluir o html na sua resposta?
Ben
0

MINHA ATUALIZAÇÃO PARA TONY L'S RESPOSTA Esta é a versão modificada de sua resposta que uso religiosamente agora. Eu pensei em compartilhá-lo, pois adiciona um pouco mais de funcionalidade a ele para várias situações que você possa ter, como diferentes tipos de positionou apenas querer centralização horizontal / vertical em vez de ambas.

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

No meu <head>:

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

Exemplos de uso:

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

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

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

Ele funciona com qualquer tipo de posicionamento e pode ser usado em todo o site com facilidade, além de ser facilmente transportável para qualquer outro site que você criar. Soluções alternativas irritantes para centralizar algo corretamente.

Espero que isso seja útil para alguém por aí! Aproveitar.

Fata1Err0r
fonte
0

Muitas maneiras de fazer isso. Meu objeto é mantido oculto com display: nenhum dentro da tag BODY, para que o posicionamento seja relativo ao BODY. Depois de usar $ ("# object_id"). Show () , eu chamo $ ("# object_id"). Center ()

Eu uso posição: absoluto porque é possível, especialmente em um pequeno dispositivo móvel, que a janela modal seja maior que a janela do dispositivo; nesse caso, parte do conteúdo modal poderá ficar inacessível se o posicionamento for corrigido.

Aqui está o meu sabor com base nas respostas dos outros e nas minhas necessidades 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
fonte
0

Você pode usar a translatepropriedade CSS :

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

Leia este post para mais detalhes.

Fred K
fonte
1
Para algo assim, você gostaria de definir o seu left: 50%e, em top: 50%seguida, você pode usar a conversão de transformação para mudar seu ponto central corretamente. No entanto, com esse método, navegadores como o Chrome distorcerão / emborcarão seu texto posteriormente, o que geralmente não é desejável. É melhor pegar a largura / altura da janela e posicionar a esquerda / parte superior com base nisso, em vez de mexer na transformação. Evita distorções e funciona em todos os navegadores em que eu testei.
Fata1Err0r 23/07/2015
0

Normalmente, eu faria isso apenas com CSS ... mas como você pediu uma maneira de fazer isso com o jQuery ...

O código a seguir centraliza uma div horizontal e verticalmente dentro de seu contêiner:

$("#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>

(veja também este violino )

John Slegers
fonte
0

Solução CSS Apenas em duas linhas

Centraliza sua divisão interna horizontal e verticalmente.

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

}

apenas para alinhamento horizontal, altere

margin: 0 auto;

e para vertical, troque

margin: auto 0;
Shivam Chhetri
fonte
0

Basta dizer: $ ("# divID"). Html ($ (''). Html ($ ("# divID"). Html ()));

1.618
fonte
-6

Por que você não usa CSS para centralizar uma div?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
} 
ahmad balavipour
fonte
2
No seu exemplo, a parte superior esquerda / div estará onde o centro deveria estar.
precisa