Truco: centrar un div de posición absoluta

En CSS a veces nos complicamos la vida con cosas sencillas que son menos complicadas de lo que pensamos, y que cuando vemos la solución casi nos entra la risa al observar semejantes anécdotas.

Más de una persona me ha preguntado como se centra un div posicionado de forma absoluta, y la respuesta es muy sencilla:

  1. Le damos una anchura fija al div. Ejemplo: 500px
  2. Posicionamos absolutamente el div con 50% de izq. Ejemplo: position:absolute;left:50%;
  3. Le restamos con el margin la mitad de lo que mide. Ejemplo: margin-left:-250px;

El resultado es un div posicionado de forma absoluta y perfectamente centrado.


Categorías

CSS

Carlos Sánchez

Una de mis pasiones es el diseño, y de hecho trabajo como diseñador de interfaces para aplicaciones de iOS, además de hacer de vez en cuando... Ver perfil ›

14 comentarios

  1.   Iván Lira dijo

    Muchísimas gracias.. tal como dices algo tan sencillo y que a pesar del paso del tiempo sigue siendo autor de muchos dolores de cabeza.
    Me sirvió mucho tu publicación, muchas gracias.

  2.   mazorquita dijo

    Muchas graciaaassss!!!

  3.   Glbroman dijo

    Buen aporte me sirvio mucho, gracias

  4.   LUCASG dijo

    Que grande loco me re sirvio :D

  5.   victor dijo

    Excelente, gracias…

  6.   benjamin dijo

    Muy bien Carlos.

  7.   Mario Lozano dijo

    excelente info

  8.   Frank Koq dijo

    Gracias me sirvio

  9.   marc dijo

    me has salvado!!! gracias :)

  10.   DanielFloyd dijo

    Gracias tío, me ayudo un montón!!, ,que falta de imaginación la mía.

  11.   damian dijo

    muchas muchisimas gracias!!!!! este truco siempre me ayuda jaja

  12.   o dijo

    muchas gracias amigo excelente

  13.   Chrismart Anji dijo

    esto no es cenrtrado, todo depende del tamaño original del elemento div base a que lo hacemos crecer dependiendo lo que se le ponga adentro, para mi me sirvio mas usar esto que visualmente si lo veo aun mas centrado y reponsive:

    absolute;
    left: 50%;
    margin-left: -100px;

    que seria la mitad.

  14.   Edgar Cjuno dijo

    Se agradece el aporte, me ayudó realmente, saludos !!!

Deja un comentario

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