Centrar div vertical y horizontalmente dentro de otro

[aganglada]

Hola buenas, Me surjio un problema que tengo ya casi resuelto, le falta la guinda, y es poder centrar el un <div> dentro de otro verticalmente, al poner margin:auto; lo centra horizontalmente pero no así verticalmente.

aquí os dejo el código, a ver si le encontráis solución:

HTML--->

Código HTML:

<div class="cag">
<div class="cag1">
<div class="cag2">
</div>
</div>
</div> 

CSS--->

Código HTML:

.cag{
	height:180px;
	width:180px;
	background:transparent;
	position:relative;
	display:inline-block;
}

.cag1{
	height:125px;
	width:125px;
	background:#cccccc;
	display:block;
	position:relative;
	margin:auto;
	-webkit-transition:400ms ease-in-out;
	-moz-transition:400ms ease-in-out;
	-o-transition:400ms ease-in-out;
	-ms-transition:400ms ease-in-out;	
	transition:400ms ease-in-out;
	-moz-border-radius:63px;
	-webkit-border-radius:63px;
	-o-border-radius:63px;
	border-radius:63px;


	
}

.cag1:hover{
	padding:25px;
	background:#cccccc;
	-moz-border-radius:90px;
	-webkit-border-radius:90px;
	-o-border-radius:90px;
	border-radius:90px;

}

.cag2{
	height:125px;
	width:125px;
	background:url(images/cag.png) no-repeat center;
	
	
}

Aqui el enlace para verlo:
http://aganglada.web44.net

La idea es que el circulo crezca por todas sus partes igualmente sin que se mueva el de dentro. Muchas Gracias de Antemano!

[sephirot47]

Prueba con:

vertical-align:middle;

(Si no recuerdo mal...)

[aganglada]

Iniciado por sephirot47

Prueba con:

vertical-align:middle;

(Si no recuerdo mal...)

Lo probé pero no hace nada :S

[sephirot47]

Aunque me he pasado por tu web y creo que el problema no es el align ni los margins...yo optaria por poner lo de dentro en otra div independiente...
Es decir, mismo procedimiento pero sin que la transformacion de las divs afecte a lo de dentro:
<div class="cag">
<div class="cag1">
</div>
</div>
<div class="cag2">
</div>

Con position:absolute...es un poco chapuzas pero puede funcionar xDD
Prueba con eso, y si no ya lo haria con js...

[Batan]

Buenas.
Poner un padding puede valerte tambien, y si tienes puesto una altura fija al DIV contenedor, pues tendrias que reducir la altura de los DIV relativamente con la del padding(no se si me explique).

Saludos.

[aganglada]

Iniciado por sephirot47

Aunque me he pasado por tu web y creo que el problema no es el align ni los margins...yo optaria por poner lo de dentro en otra div independiente...
Es decir, mismo procedimiento pero sin que la transformacion de las divs afecte a lo de dentro:
<div class="cag">
<div class="cag1">
</div>
</div>
<div class="cag2">
</div>

Con position:absolute...es un poco chapuzas pero puede funcionar xDD
Prueba con eso, y si no ya lo haria con js...

Aunque pongas el div "cag2" fuera el otro sigue creciendo igualmente...

[Pixeltwo]

Esto es mas que simple..

dentro de ese DIV coge y ponle un width y margin:auto;


por ejemplo, cuando yo quiero centrar un elemento al centro, uso margin-left/right:auto. Ojo, siempre tiene que tener un width definido sino no funcionará.

entonces en tu caso quedaria algo asi:

Código HTML:

<div id="contenedor" style="width:800px; background-color:gold; margin-left:auto; margin-right:auto;"><!--el div que contiene al div que quieres-->
 <div id="elcontenido" style="margin:auto; width:700px; background-color:white;"></div>
</div>
 

Espero me hayas entendido ! :) puedes modificar las propiedades a tus necesidades

[aganglada]

Iniciado por Pixeltwo

Esto es mas que simple..

dentro de ese DIV coge y ponle un width y margin:auto;


por ejemplo, cuando yo quiero centrar un elemento al centro, uso margin-left/right:auto. Ojo, siempre tiene que tener un width definido sino no funcionará.

entonces en tu caso quedaria algo asi:

Código HTML:

<div id="contenedor" style="width:800px; background-color:gold; margin-left:auto; margin-right:auto;"><!--el div que contiene al div que quieres-->
 <div id="elcontenido" style="margin:auto; width:700px; background-color:white;"></div>
</div>
 

Espero me hayas entendido ! :) puedes modificar las propiedades a tus necesidades

No hace nada :S, creo que el problema esta en los z-index pero no doy con la tecla de como renderizarlo.

[Pixeltwo]

No porque los Z-index la unica funcion que cumplen es superponer capas, poniendo por delante la de mayor indice...

Aqui lo que quieres es centrar verticalmente, he estado intentandolo por mi cuenta y si, no funcionó ( tampoco habia leido a fondo todo el topic ).

A mi de buenas a primeras, lo unico que se me puede llegar a ocurrir es una solucion un tanto simple, que consiste en que pongas el DIV este ( que contiene ese circulo) dentro de un div con width y height al 100%; y le pongas un margin:50% (al div de dentro).

La otra que te codees con el margin-top en base a tus necesidades, no veo otra manera posible de hacer eso..

[andresdzphp]

A mi me gusta aprender con ejemplos y aquí te dejo uno de como centrar verticalmente un div.

Código CSS:

<html>
<head>
<title>Centrado Vertical con CSS</title>
 
<style type="text/css">
 
.contenedor {
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;}
    
.contenedor[class] {
    position: fixed; 
    display: table;}
    
.centrado {
    position: absolute; 
    top: 50%;}
 
.centrado[class] {
    display: table-cell; 
    vertical-align: middle;
    text-align: center; 
    position: static;
    }
    
.contenido {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 0 auto;
    position: relative;
    top: -50%;
    }
    
</style>
 
</head>
<body>
<div class="contenedor">
    <div class="centrado">
        <div class="contenido">
        <p>Centrado vertical y horizontal</p>
 
        </div>
    </div>
</div>
</body>
 
</html>
 

[aganglada]

Iniciado por andresdzphp

A mi me gusta aprender con ejemplos y aquí te dejo uno de como centrar verticalmente un div.

Código CSS:

<html>
<head>
<title>Centrado Vertical con CSS</title>
 
<style type="text/css">
 
.contenedor {
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;}
    
.contenedor[class] {
    position: fixed; 
    display: table;}
    
.centrado {
    position: absolute; 
    top: 50%;}
 
.centrado[class] {
    display: table-cell; 
    vertical-align: middle;
    text-align: center; 
    position: static;
    }
    
.contenido {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 0 auto;
    position: relative;
    top: -50%;
    }
    
</style>
 
</head>
<body>
<div class="contenedor">
    <div class="centrado">
        <div class="contenido">
        <p>Centrado vertical y horizontal</p>
 
        </div>
    </div>
</div>
</body>
 
</html>
 

Muchas Gracias! :)