La mejor forma de centrar una caja verticalmente y horizontalmente es mediante CSS.
Para ello es necesario entender el funcionamiento del posicionamiento relativo y absoluto en un documento web.
En caso de tener estos conceptos un poco oxidados en esta lectura lo encontraréis explicado con todo detalle.
En el ejemplo que se expone a continuación se ha decidido centrar una caja que a su vez está centrada dentro de otra caja.
Se hace así para ilustrar con mayor amplitud el comportamiento del posicionamiento absoluto.
Recordar también que un centrado horizontal funciona de modo completamente distinto a uno vertical.[blockquote text=»Atención porqué el centrado vertical detallado en este ejemplo sigue una estrategia muy distinta al centrado horizontal mediante la propiedad margin: auto» show_quote_icon=»no» text_color=»#ffffff» background_color=»#045e67″]
Como centrar horizontal y vertical al mismo tiempo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Centrado horizontal y vertical de una caja">
<meta name="author" content="Francesc Ricart">
<title>Ejemplo de centrado vertical y horizontal</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.contenedor{
width:400px;
height:400px;
background-color:#ff00ff;
position:relative;
}
.caja{
width:100px;
height:100px;
background-color:#00ff00;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
.cajita{
width:40px;
height:40px;
background-color:#f0000f;
position:absolute;
top:50%;
left:50%;
margin-left:-20px;
margin-top:-20px;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="caja">
<div class="cajita">
</div>
</div>
</div>
</body>
</html>[vc_custom_heading text=»Código genérico» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]En el html podéis observar una caja de nombre contenedor, otra de nombre caja y finalmente una de nombre cajita. Se trata de 3 divs cada uno dentro del anterior.
En el CSS observar el uso de un selector universal para eliminar todos los paddings y márgenes que puedan venir por el navegador y el uso de box-sizing para garantizar que el width o height que indiquemos sea el real incluyendo margins y paddings en caso de usarlos.
Todas las cajas son cuadradas y tienen un ancho y una altura definidas.
A todas se les ha dado un color característico.[vc_custom_heading text=»Código importante» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]En primer cabe recordar que el posicionamiento absoluto requiere de una caja a su mismo tiempo posicionada.
En caso de no encontrar ninguna caja la caja de referencia termina siendo por defecto el body del documento web.
Para evitar que suceda esto a la caja contenedor (en fucsia) se le ha dado un posicionamiento relative.
Así, evitamos que el div de nombre caja se posicione respecto del body en lugar del contenedor.
En caja hemos puesto un posicionamiento absolute y en cajita también.
Para centrar caja respecto de contenedor hemos usado las propiedades top y left al 50%. Sin embargo al hacer esto el vértice superior izquierdo de caja (la que sería la referencia 0,0) se ha posicionado justo en el centro de contenedor.
Todavía no esta centrada pero estamos muy próximos. Falta un pequeño desplazamiento de caja que conseguiremos mediante margin superior e izquierdo negativos. Los navegadores modernos son capaces de entender esta instrucción. Versiones antiguas de explorer pueden dar problemas.
El desplazamiento mediante margin negativo es exactamente width/2 a la izquierda y height/2 superior(de este modo se desplazan la mitad para un lado y para arriba.
Para finalizar se ha repetido exactamente el mismo procedimiento con cajita tomando como punto de referencia para el desplazamiento absoluto caja. Como caja ya tiene un position:absolute, cajita entiende sin problemas sobre que punto de referencia se posiciona.
El resultado final se observa en la imagen:
¡Hola!
Querido lector,
ahora sólo queda practicar.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta