Como centrar un div automaticamente en medio de otro div

  • Autor Autor deskpro123
  • Fecha de inicio Fecha de inicio
deskpro123

deskpro123

Zeta
Verificación en dos pasos activada
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,
 
#div principal
{
#div secundario
{
align: center (no recuerdo si era exactamente align, creo que si)
}
}

prueba eso, quizás te funcione
 
#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.
 
HTML:
<center></center>
creo que eso seria
 
margin-left:auto;
margin-right:auto;
 
Para que quede centrado verticalmente yo usaba una tabla, y a ella le agregaba el vertical-align con css
 
margin: 0 auto;

y

vertical-align: middle

🙄
 
Última edición:
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.
 
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

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

Lo ideal sería width: 0 auto; claro definiendo antes el DIV principal.
 
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:
 
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:
 
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:
 
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:

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

Fuente
 
Atrás
Arriba