En el proceso de diseño de una página web, nos surge en muchas ocasiones la necesidad de centrar elementos horizontal y verticalmente en un div. Esto es posible realizarlo de una forma bastante sencilla con grid o flex. Pero, mi propósito en este artículo es mostraros el código necesario en CSS para hacerlo directamente.
Partimos del div en el que queremos centrar un texto. El código HTML se parecería bastante a esto:
No tiene nada de particular estas líneas. DIVs anidados con dos clases que le darán formato y que se escribe en el fichero CSS inicialmente de la siguiente forma:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
height: 400px;
border: 2px solid #006100;
margin: 100px 50px;
}
.centered-element {
margin: 0;
position: absolute;
transform: translateY(-50%);
}
Ahora nuestro objetivo será modificar el CSS para conseguir centrar horizontalmente y verticalmente el texto que tenemos incluido en el DIV.
Tan sólo tenemos que incluir las siguientes lineas en la clase centered-element:
.centered-element {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Como podéis ver, es muy fácil conseguir el efecto que perseguimos con solo unas mínimas modificaciones. Decir que exactamente lo mismo se puede hacer con una imagen.
Como siempre, tenéis a vuestra disposición la sección de comentarios de este blog para realizar todas las sugerencias de código que deseéis.