.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Estas propiedades se establecen en el elemento hijo. El posicionamiento absoluto basa la posición del elemento en relación al elemento padre más cercano que tenga position: relative. Si no encuentra ninguno, será relativo al documento. Añade top: 50%; left: 50%; porque la posición se calcula desde la esquina superior izquierda.
Debes retraer el elemento con la mitad de su ancho y alto. Puedes conseguirlo con transform: translate(-50%, -50%);
Usando Viewport Unit
.child{
margin: 50vh auto 0;
transform: translateY(-50%);
}
Utilizamos el margin-left/margin-right: auto; para el centrado horizontal y utilizamos el valor relative vh para el centrado vertical. Por supuesto, hay que retroceder el elemento como en el ejemplo absoluto (pero sólo traducir la altura). Nota :- Este método sólo funciona si estás posicionando a la vista principal.
Usando Flexbox
.parent{
display: flex;
justify-content: center;
align-items: center;
}
Estableciendo el padre(o contenedor) a display: flex; permite al navegador saber que pretendemos que los hijos usen flexbox para su diseño. Justify-content determina cómo espaciar el contenido en su fila o columna. Align-content es similar a justify-content, pero controla dónde están los elementos en el eje transversal.
En lugar de usar justify-content y align-items podemos usar margin: auto; en child.
.parent{
display: flex;
min-height: 100vh;
}
.child{
margin: auto;
}
Usando CSS Grid
.parent{
display: grid;
grid-template-rows: 100vh;
grid-template-columns: 100vw;
}
.child{
justify-self: center;
align-self: center;
}
En el padre establece display: grid;y especifica el ancho de la fila/columna. En el hijo establece el justify-self y align-self al centro. La propiedad justify-self y align-self establecen la forma en que una caja se justifica dentro de su contenedor de alineación (padre) a lo largo del eje apropiado.
Sígueme en Twitter, LinkedIn o GitHub.
Espero que este artículo te sea útil. Gracias por leer & ¡Sigue codificando!!