Centralizar Uma Div dentro da outra Horizontal e vertical

aender · 2 de março de 2012

Pessoal tudo bem ?

Estou com um problema que está me tirando do sério pois sou novato em CSS e não saco muito de posicionamento ainda.Bom, meu objetivo e centralizar uma Div dentro da outra tanto na horizontal como na vertical de modo que ao mudar a propriedade border de cada Div (aumentar e diminuir a borda ) a div do centro continue centralizada.Me parece que isso não é tão complicado , mas de qualquer forma não estou conseguindo. Valeu pessoal.

Pessoal, o que quero e fazer o que está na imagem ,eu até fiz mas acontece que não é a forma correta, pois tenho que ir setando os valores manualmente toda vez que mudo algum atributo como border por exemplo, tenho que ir setando até chegar ao desejado, acho isso uma gambiarra .Não teria como fazer isso de forma correta , A Div do meio é centralizada automaticamente, mesmo mudando algum atributo da Div1 ou dela mesma .Na horizontal eu consigo isso com margin: 0 auto , mas na vertical não sei.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css" >

#div1{ width:400px; color: #F00; border: 6px solid #000; height:240px; background-color:#3F6;}
#div2{ width:300px; position:relative; border: 6px  solid #000 ; top:20px;; height:150px; margin: 0 auto; background-color:#FF0;}


</style>
</head>

<body>
<div id="div1">Div1 
    <div id="div2"> <strong>Div2 </strong></div>
</div>
</body>
</html>

mah2602 · 2 de março de 2012

Não entendi muito bem como você está organizando suas divs, mas tenta isso:

<div align="center">

<div style="vertical-align:middle"> Conteudo </div>

</div>

DiF · 2 de março de 2012

ja tentou usar o position relative, left: alguma coisa ou margin: alguma coisa? a ideia é você manipular as divs em nivel de bloco.

por exemplo o margin: 0 auto centraliza também. experimenta por exemplo usar isso no seu conteiner que agrupa todas as divs. e das demais posicione com posiçao relativa .. podes usar o margin com mumeraçao negativa ( ir para a esquerda ou subir)

navegador2 · 3 de março de 2012

Não entendi muito bem como você está organizando suas divs, mas tenta isso:
<div align="center">

<div style="vertical-align:middle"> Conteudo </div>

</div>

Acho que seria mais indicado colocar as configurações de estilo no arquivo css externo e não no proprio html. Pois assim estaria mais de acordo com os novos padrões web, a formatação vem separada da estrutura.

No html ficaria so os codigos que criaram a div e a formatação no arquivo css

html

<div id="conteudo">conteudo </div>

Css

#Conteudo (div conteudo) {

paddingtop: 30px /*aumentando ou diminuindo você ajusta na vertical

}

DiF · 3 de março de 2012

complementando as dicas do navegador2, os atributos inline, tem grau de procedencia maior. acaba atrapalhando. siga as dicas do navegador.. use um css externo..

DiF · 3 de março de 2012

olá amigo, usando a posiçao relativa e setar o top é uma das opções.. você também pode obter o mesmo resultado das seguintes formas:

#div2{ width:300px; border: 6px solid #000 ; height:150px; margin: 20 auto; background-color:#FF0;}

ou

#div2{ width:300px; border: 6px solid #000 ; height:150px; margin-top:20px; margin: 0 auto; background-color:#FF0;}

creio que nao seja possivel criar uma div que ja fique na posiçao que você quer de forma automática, terás sempre que estilizar ela com css manualmente

aender · 3 de março de 2012

olá amigo, usando a posiçao relativa e setar o top é uma das opções.. você também pode obter o mesmo resultado das seguintes formas:
#div2{ width:300px; border: 6px solid #000 ; height:150px; margin: 20 auto; background-color:#FF0;}

ou

#div2{ width:300px; border: 6px solid #000 ; height:150px; margin-top:20px; margin: 0 auto; background-color:#FF0;}

creio que nao seja possivel criar uma div que ja fique na posiçao que você quer de forma automática, terás sempre que estilizar ela com css manualmente

Valeu de novo rapaz, obrigado mesmo !!!