Como centrar un div automaticamente en medio de otro div

deskpro123 · 28 Feb 2014

Hola a todos, quisiera saber como centrar un div automaticamente en Medio de otro div que estaria variando su altura por el tamano de las imagenes.

Un saludo,

Mr__Toc · 28 Feb 2014

#div principal
{
#div secundario
{
align: center (no recuerdo si era exactamente align, creo que si)
}
}

prueba eso, quizás te funcione

deskpro123 · 28 Feb 2014

ArmandoAcosta dijo:
#div principal
{
#div secundario
{
align: center (no recuerdo si era exactamente align, creo que si)
}
}

prueba eso, quizás te funcione

Gracias pero creo que eso solo lo centraria horizontalmente, yo quisiera centrarlo verticalemente, ya que si el div llega a ser de 500px, este centrado en 250px.

kanikase · 28 Feb 2014

HTML:

<center></center>

creo que eso seria

vicram10 · 28 Feb 2014

prueba con

Insertar CODE, HTML o PHP:

vertical-align:middle

kanikase dijo:
HTML:

<center></center>

creo que eso seria

ya no se usa esa tag..

tepublico · 28 Feb 2014

margin-left:auto;
margin-right:auto;

xSkArx · 28 Feb 2014

Para que quede centrado verticalmente yo usaba una tabla, y a ella le agregaba el vertical-align con css

shadowhck · 28 Feb 2014

margin: 0 auto;

y

vertical-align: middle

elgusty00 · 3 Mar 2014

El div de adento le colocas un ancho (width) y luego el margin en auto.

<div>
<div style="width:50%; margin:auto"></div>
</div>

Saludos.

yockerzard · 3 Mar 2014

.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

Fuente

Chakal01 · 3 Mar 2014

Caramba algunas respuestas me hicieron reir como la de <center></center>

Lo ideal sería width: 0 auto; claro definiendo antes el DIV principal.

Andres128 · 3 Mar 2014

Chakal01 dijo:
Caramba algunas respuestas me hicieron reir como la de <center></center>

Lo ideal sería width: 0 auto; claro definiendo antes el DIV principal.

Pero a la final se esta buscando centrar y <center></center> cumplen muy bien su trabajo y los que dicen que ese tag ya no se usa, pues yo lo utilizo y lo utilizare hasta que el navegador no lo permita.

Saludos :encouragement:

Chakal01 · 3 Mar 2014

Andres128 dijo:
Pero a la final se esta buscando centrar y <center></center> cumplen muy bien su trabajo y los que dicen que ese tag ya no se usa, pues yo lo utilizo y lo utilizare hasta que el navegador no lo permita.

Saludos :encouragement:

El problema amigo es que ya eso está [deprecated] si haces uso de eso así, sólo indica una cosa que no estás haciendo uso de CSS para maquetar, cosa que es lo más recomendado.

Saludos! :encouragement:

Andres128 · 3 Mar 2014

Chakal01 dijo:
El problema amigo es que ya eso está [deprecated] si haces uso de eso así, sólo indica una cosa que no estás haciendo uso de CSS para maquetar, cosa que es lo más recomendado.

Saludos! :encouragement:

Interesante, gracias por tu explicación Chakal01 :encouragement:

Xanina · 11 Abr 2014

las demás no sé si funcionarán, alguna creo que sí... pero desde luego esta es la CORRECTA con mayúsculas, es la bien hecha :encouragement:

yockerzard dijo:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

Fuente