Trucco: centra una posizione assoluta div

Nei CSS a volte complichiamo le nostre vite con cose semplici che sono meno complicate di quanto pensiamo, e che quando vediamo la soluzione quasi ridiamo nell'osservare simili aneddoti.

Più di una persona mi ha chiesto come centrare un div posizionato in modo assoluto e la risposta è molto semplice:

  1. Diamo al div una larghezza fissa. Esempio: 500px
  2. Posizioniamo assolutamente il div con il 50% rimasto. Esempio: posizione: assoluta; sinistra: 50%;
  3. Sottraiamo metà di ciò che misura con il margine. Esempio: margin-left: -250px;

Il risultato è un div perfettamente centrato e assolutamente posizionato.


Il contenuto dell'articolo aderisce ai nostri principi di etica editoriale. Per segnalare un errore fare clic su qui.

15 commenti, lascia il tuo

Lascia un tuo commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.

  1.   Ivan Lira suddetto

    Grazie mille .. come dici una cosa così semplice e che nonostante il passare del tempo è ancora artefice di molti grattacapi.
    Il tuo post mi è stato molto utile, grazie mille.

  2.   pod suddetto

    Grazie mille !!!

  3.   Glbroman suddetto

    Un buon contributo mi ha aiutato molto, grazie

  4.   LUCASG suddetto

    Che grande matto mi ha servito: D

  5.   vincitore suddetto

    Eccellente grazie…

  6.   benzoino suddetto

    Molto bravo Carlos.

  7.   Mario Lozano suddetto

    ottime informazioni

  8.   Frank Koq suddetto

    Grazie, mi è servito

  9.   marc suddetto

    Mi hai salvato!!! Grazie :)

  10.   Danielfloyd suddetto

    Grazie zio, mi ha aiutato molto !!, quella mia mancanza di immaginazione.

  11.   damian suddetto

    Grazie mille !!!!! questo trucco mi aiuta sempre ahah

  12.   o suddetto

    grazie mille eccellente amico

  13.   Natale Anji suddetto

    Questo non è centrato, tutto dipende dalla dimensione originale dell'elemento div di base che facciamo crescere a seconda di cosa viene messo dentro, per me è stato più utile usarlo che visivamente se lo vedo ancora più centrato e rispondente:

    assoluto;
    a sinistra: 50%;
    margine-sinistra: -100px;

    sarebbe la metà.

  14.   Edgar cjuno suddetto

    Il contributo è apprezzato, mi ha davvero aiutato, saluti!

  15.   Miriam Jess suddetto

    Un ottimo contributo mi ha aiutato molto, mille grazie!