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.
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:
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.
(function($){
$.fn.extend({
center:function(){returnthis.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);returnthis.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);
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
@ 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.
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:
.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*/}
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())});returnthis;}
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.
<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")
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:
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 .
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);returnthis.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 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:
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)
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}}
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:
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:
<tableclass="super-centered"><tr><td><divclass="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; :
@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');}};
$(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á 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.
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));returnthis;}// Center it horizontally only
jQuery.fn.centerHor =function(pos){this.css("position", pos);this.css("left",($(window).width()/2)-(this.outerWidth()/2));returnthis;}// Center it vertically only
jQuery.fn.centerVer =function(pos){this.css("position", pos);this.css("top",($(window).height()/2)-(this.outerHeight()/2));returnthis;}
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.
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 resizingthis.css("top","50%");this.css("left","50%");//use negative margin to centerthis.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 offscreenif(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});returnthis;};
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:
Respostas:
Eu gosto de adicionar funções ao jQuery, então essa função ajudaria:
Agora podemos escrever:
Demo: Fiddle (com parâmetro adicionado)
fonte
<div>
vez de<body>
? Talvez você deve mudarwindow
parathis.parent()
ou adicionar um parâmetro para isso.Eu coloquei um plugin jquery aqui
VERSÃO MUITO CURTA
VERSÃO CURTA
Ativado por este código:
VERSÃO PLUGIN
Ativado por este código:
Isso está certo ?
ATUALIZAÇÃO:
De CSS-Tricks
fonte
Eu recomendaria o utilitário jQueryUI Position
o que lhe dá muito mais possibilidades do que apenas centralizar ...
fonte
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.
fonte
$(window).resize(function(){$('#mydiv').center()});
(mydiv é um diálogo modal, então quando ele é fechado para remover o manipulador de eventos de redimensionamento.)outerWidth()
eouterHeight()
considerar o preenchimento e a largura da borda.$(window).height()
dá 0. Mas mudei de posição para 'absoluto'.Você pode usar CSS sozinho para centralizar da seguinte maneira:
Exemplo de trabalho
calc()
permite fazer cálculos básicos em css.calc()
Tabela de suporte da documentação MDN paranavegador
fonte
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.
Para usar, você faria algo como:
fonte
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.Eu usaria a função UI do jQuery
position
.Veja demonstração de trabalho .
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")
fonte
Gostaria de corrigir um problema.
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) escrollTop() = 0
, por exemplo:window.height
é600
this.height
é650
Agora a caixa está centralizada
-25
fora da tela.fonte
Isso não foi testado, mas algo assim deve funcionar.
fonte
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 .
fonte
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:
fonte
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:
Você precisa colocar
margin: 0
para 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:
fonte
Isso é ótimo. Eu adicionei uma função de retorno de chamada
fonte
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:
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:
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:
E a posição do conteúdo é ajustada com boa margem antiga : 0 automático; :
Violino de trabalho conforme prometido: http://jsfiddle.net/teDQ2/
fonte
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.
fonte
Eu uso isso:
fonte
Por favor use isto:
fonte
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.
fonte
Aqui está a minha versão. Eu posso mudar depois de olhar para esses exemplos.
fonte
Não é necessário jquery para isso
Eu usei isso para centralizar o elemento Div. Estilo Css,
Elemento aberto
fonte
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
position
ou apenas querer centralização horizontal / vertical em vez de ambas.center.js:
No meu
<head>
:Exemplos de uso:
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.
fonte
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:
fonte
Você pode usar a
translate
propriedade CSS :Leia este post para mais detalhes.
fonte
left: 50%
e, emtop: 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.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:
(veja também este violino )
fonte
Solução CSS Apenas em duas linhas
Centraliza sua divisão interna horizontal e verticalmente.
}
apenas para alinhamento horizontal, altere
e para vertical, troque
fonte
Basta dizer: $ ("# divID"). Html ($ (''). Html ($ ("# divID"). Html ()));
fonte
Por que você não usa CSS para centralizar uma div?
fonte