Truco: centrar un div de posiciĆ³n absoluta

Carlos SƔnchez

1 minuto

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.