Centrar position absolute | CSS [2020]

Centrar position absolute | CSS [2020]

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!

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.

Cómo centrar un elemento con position absolute
CSS 3: Centrar position absolute

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.

Dejar una respuesta

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

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>