Come centrare orizzontalmente un div: cosa semplice ma fastidiosa ogni volta da ricordare. In questo articolo scopriamo come farlo!
Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!
Centrare orizzontalmente un div in una pagina HTML a volte può essere una gran rottura per quanto un’operazione stupida.
Ti sarà capitato mille volte di essere di fronte a uno scenario di questo tipo:
<div id="esterno">
<div id="interno">
Contenuto
</div>
</div>
E ti sarai scervellato mille volte su trick in tecnichese complicatissimo per capire come centrare quel maledetto div orizzontalmente, vero?!
Usiamo il CSS per centrare orizzontalmente il div
Per centrare orizzontalmente il div di cui stiamo parlando, nel nostro esempio quello “interno”, possiamo adottare una soluzione tramite il CSS:
#interno {
width: 50%;
margin: 0 auto;
}
Ho impostato come larghezza del div il 50%, ma ovviamente qualunque valore va bene per centrarlo orizzontalmente, purché di valore inferiore a quello del div che lo contiene.
“Sì ma Lorenzo scusa a che serve il margin?”
È quello che effettivamente serve a centrare orizzontalmente il div che stiamo cercando di piazzare al centro della pagina.
Prima di andare oltre e terminare questa soluzione, è giusto parlare anche di quel maledetto Internet Explorer dalla versione 8 in poi:
#interno {
display: table;
margin: 0 auto;
}
Passiamo a quella un po’ più “smart”.
Usiamo Flexbox per centrare orizzontalmente il div
Questa variante ci permette di risolvere il problema di centratura orizzontale in un modo un po’ più intelligente.
A questo giro si tratta di agire sul contenitore del nostro div:
#contenitore {
width: 100%;
display: flex;
}
Questa soluzione è un po’ più “smart” come dicevo prima, per il semplice discorso che non devi impostare alcuna dimensione fissa dei div.
L’attributo CSS “display”, il cui valore è impostato a “flex” (da qua il nome “flexbox”), permette di centrare appunto lungo l’asse orizzontale della pagina web il nostro div, ma senza dover diventare scemi con le dimensioni del div stesso.
Non solo: se avrai notato, non ho fatto una variante per Internet Exploder (scusa, non ho resistito :D).
Perchè in questo caso, funziona anche per quel maledetto browser web senza alcun problema!
