Minitip: HTML/CSS – Centrar verticalmente (y horizontalmente) un div dentro de otro

Cada vez que tengo que vérmelas con un centrado vertical usando css es la misma historia. No hay forma de hacerlo.

La última vez parecía que con display:table-cell y vertical-align:middle la cosa iba, pero hace unos días tuve que volver a maquetar una página, tuve que centrar verticalmente un texto en un div… y que si quieres arroz Catalina, el texto se quedaba en la esquina inferior izquierda Y NO IBAN A MOVERLO.

La forma en la que lo conseguí esta vez, y espero que sea la definitiva, es la siguiente:

.div-padre {
position : relative;
}


.div-hijo {
position : absolute;
top : 50%; left : 50%;
transform : translate(-50%, -50>%);
}

Probarlo en fiddle

Ojo: también he visto que se puede conseguir usando flexbox. Al final no ha sido lo que he usado para el proyecto, pero poder podría haberlo usado.


.div-padre {
display : flex;
justify-content : center;
align-items : center;
}

Probarlo en fiddle

****************************************************************************

Espero que esta entrada pueda ser de utilidad, y si no, como siempre, aquí tenéis un gato para compensar.

 

One thought on “Minitip: HTML/CSS – Centrar verticalmente (y horizontalmente) un div dentro de otro

  1. Gran tip frekfifulisis!
    Una pregunta. ¿Cómo puedo centrar los cuadros del salón? Por más que lo intento no lo consigo.
    He probado a girar la estructura pero los vecinos no me dejan.
    ¿Podría poner un div entre la tele y el sofá?
    Gracias fruity!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *