Publicado em 11 de jun.

Centralizar div

Boa tarde.

Estou procurando uma solução para meu problema porem não achei nada util ainda.

Estou desenvolvendo um site que preciso colocar uma div centralizada na vertical, horizontal nem importa muito pois a div pega 100%.

Sem fazer isso sem problema algum com css porem para fazer com css preciso setar um height padrão na div para poder diminuir no margin-top depois.

Quero fazer a centralização por jquery fazendo o jquery pegar o tamanho que a div esta e adpitando ela no centro.

Alguem pode me ajudar pois so pessimo em jquery hehe.

Obrigado.

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

lezão· 12 de jun.

Ola PINOC, bom dia!

no eu entendi tente isso

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">

<html>
<head>
<title>Centrar uma página com CSS</title>
<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1">

margin:0;
padding:0;
background:#cccccc;

text-align:center; / hack para o IE /
}

#tudo {
width: 760px;
margin:0 auto;
padding: 0px;

text-align:left; / "remédio" para o hack do IE /
}

#conteudo {
padding: 0px;
background-color: #eeeeee;
	}
</style>
</head>
<body>
<div id="tudo">
<div id="conteudo">
 <h1>Pagina Centrada com CSS sem scroll ate 800x600</h1>
 <p> Não use nenhum elemento HTML

(figuras, tabelas, etc...) com largura

 superior a 750px.</p>
</div>
</div>
</body>
</html>

espero ter ajudado?????

pinoc· 12 de jun.

Lezão.

Cara oque preciso e centralizar na VERTICAL na horizontal não tem nescesidade pois a div ficara em 100%.

Obrigado pela ajuda até agora.

Tadeu Barbosa· 12 de jun.

<div id="container">

 <div id="centralizado"> lorem ipsum </div>

</div>

<style>
#container {
 height: 300px;
 position: relative;
 background: #df4;
}

#centralizado {
 width: 80%;
 position: absolute;
 left:0; right:0;
 margin: auto;
 padding: 20px;
 background: #51d;
}
</style>

<script>
$(function(){

 $('#centralizado').css('top', ($('#container').outerHeight() - $('#centralizado').outerHeight()) / 2);

});
</script>

JsFiddle: http://jsfiddle.net/hN9d6/