Truc: centrar un div de posició absoluta

En CSS de vegades ens compliquem la vida amb coses senzilles que són menys complicades del que pensem, i que quan veiem la solució gairebé ens entra el riure a l'observar semblants anècdotes.

Més d'una persona m'ha preguntat com se centra un div posicionat de forma absoluta, i la resposta és molt senzilla:

  1. Li donem una amplada fixa a l'div. Exemple: 500px
  2. Posicionem absolutament el div amb 50% d'esq. Exemple: position: absolute; left: 50%;
  3. Li restem amb el margin la meitat del que mesura. Exemple: margin-left: -250px;

El resultat és un div posicionat de forma absoluta i perfectament centrat.


El contingut d'l'article s'adhereix als nostres principis de ètica editorial. Per notificar un error punxa aquí.

15 comentaris, deixa el teu

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà.

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

  1.   Iván Lira va dir

    Moltíssimes gràcies .. tal com dius una cosa tan senzilla i que tot i el pas de l'hora encara està autor de molts mals de cap.
    Em va servir molt la teva publicació, moltes gràcies.

  2.   panotxa va dir

    Moltes graciaaassss !!!

  3.   Glbroman va dir

    Bona aportació em va servir molt, gràcies

  4.   LUCASG va dir

    Que gran boig em re va servir: D

  5.   vencedor va dir

    Excel·lent, gràcies ...

  6.   Benjamí va dir

    Molt bé Carles.

  7.   Mario Lozano va dir

    excel·lent info

  8.   Frank Koq va dir

    Gràcies em va servir

  9.   marc va dir

    m'has salvat !!! gràcies :)

  10.   DanielFloyd va dir

    Gràcies oncle, em va ajudar un munt !!,, que manca d'imaginació la meva.

  11.   damian va dir

    moltes moltíssimes gràcies !!!!! aquest truc sempre m'ajuda jaja

  12.   o va dir

    moltes gràcies amic excel·lent

  13.   Chrismart Anji va dir

    això no és cenrtrado, tot depèn de la mida original de l'element div base de que ho fem créixer depenent el que se li posi dins, per mi em va servir mes usar això que visualment si ho veig encara més centrat i responsive:

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

    que seria la meitat.

  14.   Edgar Cjuno va dir

    S'agraeix l'aportació, em va ajudar realment, salutacions !!!

  15.   Miriam Jess va dir

    Molt bona aportació em va ajudar molt, mil gràcia !!!