Função para centralizar elementos na tela com Jquery

[Lucas Peperaio 20]

Retirei a função deste site:

http://manos.malihu....ith-jquery.html

 

então eu adpatei e alterei um pouco o código com o uso do animate e IFs de uma linha. Com esta função, você pode definir um elemento, e ele irá centralizar suavemente com jQuery. E quando o usuário redimensionar a janela, o elemento será novamente centralizado:

function CenterItem(theItem){
	var winWidth=$(window).width();
	var winHeight=$(window).height();
	var windowCenter=winWidth/2;
	var itemCenter=$(theItem).width()/2;
	var theCenter=windowCenter-itemCenter;
	var windowMiddle=winHeight/2;
	var itemMiddle=$(theItem).height()/2;
	var theMiddle=windowMiddle-itemMiddle;
	winWidth>$(theItem).width() ? $(theItem).animate({'left':theCenter},300) : $(theItem).animate({'left':'0'},300);
	winHeight>$(theItem).height() ? $(theItem).animate({'top':theMiddle},300) : $(theItem).animate({'top':'0'},300);
}

e para chamar

CenterItem('#seu-elemento');

 

Caso queira que ao redimensionar a janela, o elemento volte a centralizar:

$(window).resize(function() {
			CenterItem('#seu-elemento');
});

[João Arruda 0]

Gostaria de deixar meu comentário...

 

Lucas, você testou essa funçãozinha em outros navegadores que não o IE?

Aqui parece que no IE da certinho, mas no Firefox e no Chrome só centraliza verticalmente, não horizontalmente.

[William Bruno 1501]

Ficou torto realmente..

 

este aqui que fiz sem jQuery, apenas com javascript puro funciona melhor:

http://www.wbruno.com.br/blog/2011/03/23/div-centralizada-verticalhorizontal-fixa-rolagem-da-janela/

[João Arruda 0]

Ah, parece que eu consegui acertar...

 

William, obrigado pelo teu script, mas eu testei aqui... ele fica um pouquinho mais pra baixo do que o meio... a centralização horizontal está perfeita, mas a vertical deu um pouco de diferença... não sei se é por causa do IE9 ou dos elementos que estou utilizando, mas apenas dei meu feedback ^^

[William Bruno 1501]

opa =)

 

poste um link para o teu site, para eu conferir cara.

vlw pelo feedback

[João Arruda 0]

opa =)

 

poste um link para o teu site, para eu conferir cara.

vlw pelo feedback

 

Ah, ainda estou no projeto... Só terei um servidor disponível para acomodá-lo quando eu o terminar, e acho que só iremos utiliza-lo na Intranet :\

[Lucas Peperaio 20]

Sim, eu testei no Firefox 4, Chrome 10, Opera e Safari atuais...sem problema nenhum! O IE eu não cheguei a testar (e nem vou tentar!)