Usando jQuery para centralizar uma DIV na tela

StackOverflow https://stackoverflow.com/questions/210717

Pergunta

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

Foi útil?

Solução

Eu como a adição de funções para jQuery para que esta função iria ajudar: 

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

Demonstração: Fiddle (com parâmetro adicionado)

Outras dicas

Eu coloquei um plugin jQuery aqui

MUITO CURTO VERSÃO 

$('#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);

Se ativa por este código: 

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

PLUGIN VERSÃO 

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

Se ativa por este código: 

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

é mesmo?

UPDATE:

A partir CSS-Tricks 

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

Eu recomendaria jQueryUI Posição utilidade 

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

que lhe dá muito mais possibilidades do que única centralização ...

Aqui está a minha ir para lá. Acabei usando isso para o meu clone Lightbox. A principal vantagem desta solução é que o elemento vai permanecer centrado automaticamente mesmo se a janela é redimensionada tornando-o 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;
}

Você pode usar CSS sozinho ao centro assim:

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.

MDN para calc()
mesa de suporte ao navegador

Eu estou expandindo a grande resposta dada por @TonyL. Eu estou adicionando Math.abs () para embrulhar os valores, e eu também levar em conta que jQuery pode estar em "nenhum conflito" modo, como por exemplo, no WordPress.

Eu recomendo que você enrolar os valores superior e esquerda com Math.abs () como eu fiz abaixo. Se a janela é muito pequena, e seu diálogo modal tem uma caixa de fechamento no topo, isso vai evitar o problema de não ver na caixa de fechamento. função de Tony teria tido valores potencialmente negativos. Um bom exemplo de como você acabar com valores negativos é se você tem um diálogo grande centrado mas o usuário final tem instalado várias barras de ferramentas e / ou aumento da sua fonte padrão - em tal caso, a caixa de fechamento em um diálogo modal (se no topo) pode não ser visível e clicável.

A outra coisa que eu faço é a velocidade esta um pouco pelo cache do objeto (janela) $ para que eu reduzir traversals DOM extras, e eu usar um CSS 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 assim: 

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

Gostaria de usar o jQuery UI função position.

Veja trabalhando demonstração . 

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

Se eu tenho uma div com id "teste" para o centro, em seguida, o seguinte script seria centralizar o div na janela do documento pronto. (Os valores padrão para "meu" e "at" nas opções de posição são "centro") 

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

Gostaria de emissão correta. 

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

código acima não vai funcionar nos casos em que this.height (vamos supor que o usuário redimensiona a tela eo conteúdo é dinâmico) e scrollTop() = 0, exemplo:

window.height é 600
this.height é 650 

600 - 650 = -50  

-50 / 2 = -25

Agora, a caixa está centrada offscreen -25.

Eu não acho que ter uma posição absoluta seria melhor se você quiser um elemento sempre centrado no meio da página. Você provavelmente quer um elemento fixo. I encontrado outro jquery centragem de encaixe que é utilizado posicionamento fixo. Ele é chamado fixo centro .

Esta é testado, mas algo como isso deve funcionar. 

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

O componente de transição desta função funcionou muito mal para mim no Chrome (não testar em outro lugar). Gostaria de redimensionar a janela um monte e meu elemento que tipo de scoot em torno lentamente, tentando recuperar o atraso.

Assim, os seguintes comentários de função que parte para fora. Além disso, eu adicionei parâmetros para passar em opcionais x e y booleans, se você quiser centro 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);

Para centralizar o elemento em relação à janela do navegador (janela), não use position: absolute, o valor da posição correta deve ser fixed (meios absolutos: "O elemento é posicionado em relação à sua primeira posição (não estático) ancestral elemento" ).

Esta versão alternativa do centro proposto plugin usa "%" em vez de "px" Então, quando você redimensionar a janela do conteúdo é manter 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;
}

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

O 50*(1-ratio) vem de:

Janela Largura: W = 100%

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

-los para calculé o centrada esquerda: 

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

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

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:

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

Eu estou oferecendo uma (quase) verbatim copiar de como este foi tratada em http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - é fortemente cortado para o IE, mas fornece uma maneira CSS puro de responder à 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/

Já corri isso através Browsershots e parece bem; se por nada mais, eu vou manter o original abaixo para que percentual de margem manipulação como ditado pela especificação CSS vê a luz do dia.

Original:

Parece que estou atrasado para a festa!

Existem alguns comentários acima que sugerem que esta é uma questão CSS - separação de interesses e tudo. Deixe-me começar por dizer que a CSS realmente um tiro no próprio pé em um presente. Quero dizer, como seria fácil de fazer isso: 

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

Right? canto do recipiente superior esquerdo seria no centro da tela, e com margens negativas do conteúdo irá magicamente reaparecem no centro absoluto da página! http://jsfiddle.net/rJPPc/

! Errado posicionamento horizontal é OK, mas na vertical ... Oh, eu vejo. Aparentemente, em css, quando definir as margens superior em%, o valor é calculado como uma porcentagem sempre relativa para o largura do bloco contendo . Como maçãs e laranjas! Se você não confia em mim ou Mozilla doco, ter um jogo com o violino acima ajustando largura do conteúdo e ser surpreendido.

Agora, com CSS ser meu pão e manteiga, eu não estava prestes a desistir. Ao mesmo tempo, eu prefiro as coisas fáceis, para que eu tenha emprestado as conclusões de um Czech CSS guru e é feita em um violino de trabalho. Para encurtar a história, criamos uma tabela na qual vertical-align está definido para médio: 

<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 é com o bom e velho margem afinado: 0 auto; : 

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

fiddle Trabalho como prometido: http://jsfiddle.net/teDQ2/

O que temos aqui é um método de "centro" que garante o elemento que você está tentando centro não é apenas de ou posicionamento "fixo" "absoluto", mas também garante que o elemento que você está centrando é menor do que seu pai , este centros e elemento em relação a é pai, se a elementos pai é menor do que o próprio elemento, ele irá pilhar o DOM para o próximo pai, e centralizá-lo 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');
        }
    };

Eu uso este: 

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

Por favor, use o seguinte: 

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

você está recebendo essa transição pobre porque você está ajustando a posição do elemento de cada vez que o documento é rolado. O que você quer é usar posicionamento fixo. Tentei que o centro fixo plug-in listados acima e que parece fazer resolver o problema bem. posicionamento fixo permite centralizar um elemento uma vez, e a propriedade CSS vai cuidar de manter essa posição para você toda vez que você rolar.

Aqui é a minha versão. Eu posso mudá-lo depois que eu 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");
    });
};

Não há necessidade jquery para este

Eu usei isso para o centro do elemento Div. Css Style, 

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

Open elemento 

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

});

MY ATUALIZAÇÃO PARA TONY L'S RESPOSTA Esta é a versão modded de sua resposta que eu uso religiosamente agora. Eu pensei que eu iria partilhá-la, uma vez que acrescenta um pouco mais funcionalidade a ele para várias situações que você pode ter, tais como diferentes tipos de position ou apenas que desejam centralização horizontal / vertical em vez 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;
}

Na minha <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 utilizado ao longo de todo o seu site com facilidade, bem como facilmente transportável para qualquer outro site que você cria. Não há soluções alternativas mais irritantes para centrar algo corretamente.

Hope isso é útil para alguém lá fora! Desfrute.

lote de maneiras de fazer isso. Meu objetivo é mantida escondida com display: none apenas dentro da tag corpo de modo que o posicionamento é em relação ao corpo. Depois de usar o $ show ( "# object_id"). () , eu chamo $ centro ( "# object_id"). ()

Eu uso position: absolute porque é possível, especialmente em um pequeno dispositivo móvel, que a janela modal é maior do que a janela do dispositivo, caso em que alguns dos conteúdos modal poderia ser inacessível se posicionamento foi corrigido.

Aqui está o meu sabor com base em respostas de outros e as 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;
    };

Normalmente, eu faria isso com CSS única ... mas já que você perguntou-lhe uma maneira de fazer isso com jQuery ...

O seguinte código centra uma div tanto horizontalmente e verticalmente dentro do seu recipiente: 

$("#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 também este Fiddle )

solução CSS em duas linhas única

Ele centralizar o seu div interna horizontalmente e verticalmente. 

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

}

para alinhar única horizontal, mudança 

margin: 0 auto;

e para a vertical, mudança 

margin: auto 0;

Você pode usar a propriedade CSS translate: 

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

Leia este post para mais detalhes.

Por que você não usar CSS para centrar uma div? 

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top