Come centrare gli elementi verticalmente e orizzontalmente in Flexbox
Di seguito sono riportate due soluzioni di centraggio generali.
Uno per gli oggetti flessibili allineati verticalmente ( flex-direction: column) e l'altro per gli oggetti flessibili allineati orizzontalmente ( flex-direction: row).
In entrambi i casi l'altezza dei div centrati può essere variabile, indefinita, sconosciuta, qualunque cosa. L'altezza dei div centrati non ha importanza.
Ecco l'HTML per entrambi:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (esclusi gli stili decorativi)
Quando gli oggetti flessibili sono impilati verticalmente:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
DEMO
Quando gli oggetti flessibili sono impilati in orizzontale:
Modifica la flex-directionregola dal codice sopra.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
DEMO
Centrare il contenuto degli oggetti flessibili
L'ambito di un contesto di formattazione flessibile è limitato a una relazione padre-figlio. I discendenti di un contenitore flessibile oltre i bambini non partecipano al layout flessibile e ignoreranno le proprietà flessibili. In sostanza, le proprietà flessibili non sono ereditabili oltre i bambini.
Quindi, dovrai sempre applicare display: flexo display: inline-flexun elemento genitore per applicare le proprietà flex al figlio.
Per centrare verticalmente e / o orizzontalmente il testo o altro contenuto contenuto in un oggetto flessibile, rendere l'elemento un contenitore flessibile (nidificato) e ripetere le regole di centraggio.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Maggiori dettagli qui: Come allineare verticalmente il testo all'interno di un flexbox?
In alternativa, puoi applicare margin: autol'elemento di contenuto dell'elemento flessibile.
p { margin: auto; }
Scopri autoqui i margini flessibili : Metodi per l'allineamento degli articoli Flex (vedi riquadro # 56).
Centratura di più linee di oggetti flessibili
Quando un contenitore flessibile ha più linee (a causa dell'avvolgimento), la align-contentproprietà sarà necessaria per l'allineamento dell'asse trasversale.
Dalle specifiche:
8.4. Flexing Packing: la align-content
proprietà
La align-contentproprietà allinea le linee di un contenitore flessibile all'interno del contenitore flessibile quando vi è spazio extra nell'asse trasversale, in modo simile a come justify-contentallinea i singoli elementi all'interno dell'asse principale.
Nota, questa proprietà non ha alcun effetto su un contenitore flessibile a riga singola.
Maggiori dettagli qui: come funziona flex-wrap con align-self, align-items e align-content?
Supporto per il browser
Flexbox è supportato da tutti i principali browser, tranne IE <10 . Alcune versioni recenti del browser, come Safari 8 e IE10, richiedono prefissi fornitore . Per un modo rapido per aggiungere prefissi, utilizzare Autoprefixer . Maggiori dettagli in questa risposta .
Soluzione di centraggio per browser meno recenti
Per una soluzione di centraggio alternativa che utilizza la tabella CSS e le proprietà di posizionamento, consultare questa risposta: https://stackoverflow.com/a/31977476/3597276
