Centrar position absolute verticalmente con CSS, es una de las dudas más realizadas en cursos de HTML y CSS. Esta entrada de hoy será muy cortita, pero quiero ir al grano y darte la solución rápidamente. ¡Vamos!
Índice
Cómo centrar position absolute
Cómo te prometía, voy a darte el fragmento de código CSS que necesitas para centrar position absolute en el centro de la pantalla. Ya sea vertical u horizontalmente.
Centrar verticalmente position absolute
Para centrar verticalmente un elemento en la pantalla (o “contenedor padre” del cual hablaremos más adelante), voy a darte dos fragmentos de código CSS. El primero de ellos es el siguiente:
div{
position: absolute;
top: 50%;
transform: translateY(-50%);
}El segundo código que te doy, ya no recurre a position absolute, pero creo que es interesante que conozcas. Sería usando la propiedad display:flex en el elemento padre del elemento que queremos centrar. El HTML sería así:
<div id="padre">
<div id="hijo"></div>
</div>#padre{
display: flex;
align-items-center;
height:400px; /*Esta altura se la damos al padre para que pueda centrarse verticalmente el hijo*/
}Centrar horizontalmente position absolute
Como en la ocasión anterior, si queremos centrar un elemento con position absolute horizontalmente, deberemos introducir el siguiente código:
div{
position: absolute;
left: 50%;
transform: translateX(-50%);
}De la misma forma que en el supuesto anterior, para centrar un elemento sin usar position absolute, podemos usar Flexbox. El código sería el siguiente:
<div id="padre">
<div id="hijo"></div>
</div>#padre{
display: flex;
justify-content-center;
}En esta ocasión, si te fijas, no hemos necesitado dar una “altura” mínima al elemento padre, ya que se presupone que vamos a usar el 100% del ancho de la pantalla.
Recuerda
Recuerda que un elemento CSS con position absolute va a coger como referencia para su posicionamiento, el primer elemento “padre” en el árbol HTML que tenga position relative. Si el elemento con position absolute no tuviera ningún elemento “ascencente” con position relative, este cogería como referencia <body> como referencia para su posicionamiento en la pantalla. Puedes leer más sobre posicionamiento absoluto y relativo en W3School.
Conclusión
Cómo habrás visto, centrar position absolute es realmente sencillo. Ya sea horizontalmente o verticalmente. Si tienes alguna duda para aplicar este código, o necesitas que te ayude con el diseño de tu página web, no dudes en dejarme un mensaje justo aquí abajo.