Come faccio a centrare orizzontalmente un <div> all’interno di un altro <div>?

Come faccio a centrare orizzontalmente un <div> all’interno di un altro <div>?

Prima o poi capiterà a tutti: centrare orizzontalmente un div che si trova all’interno di un altro div. Come si fa?

Mi trovo davanti alla necessità di centrare orizzontalmente un <div> che si trova all’interno di un altro <div> e lo devo fare usando CSS. È possibile?
La situazione è la seguente (il <div> interno deve trovarsi al centro di quello esterno):

<div id="outer">  
  <div id="inner">Mio testo</div>
</div>

Soluzione

Questo è un problema tipico con cui prima o poi ci si scontra. Ci sono diversi metodi che si possono utilizzare per ottenere il risultato. Qui ne viene proposto uno, forse il più utilizzato: il segreto è tutto nel seguente codice CSS margin: 0 auto;
Nell’esempio che segue viene impostata la larghezza massima del <div> interno al 50% rispetto a quella del <div> esterno (width: 50%;). Inoltre gli viene colorato lo sfondo di giallo per meglio mostrare il risultato (background-color: yellow;). Infine viene anche centrato il testo contenuto nel <div> interno (text-align: center;). Puoi cliccare sui link HTML, CSS e Result per vedere i codici e il relativo risultato in tempo reale 🙂