Flexbox: centrare orizzontalmente e verticalmente

Penso che vogliate qualcosa come il seguente.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

Vedi la demo su: http://jsfiddle.net/audetwebdesign/tFscL/

I tuoi elementi .flex-item dovrebbero essere a livello di blocco (div invece di span) se vuoi che l'altezza e il padding superiore/inferiore funzionino correttamente.

Inoltre, su .row, imposta la larghezza su auto invece di 100%.

Le tue proprietà .flex-container vanno bene.

Se vuoi che la .row sia centrata verticalmente nella view port, assegna il 100% di altezza a html e body, e azzera anche i margini di body.

Nota che .flex-container ha bisogno di un'altezza per vedere l'effetto di allineamento verticale, altrimenti il contenitore calcola l'altezza minima necessaria per racchiudere il contenuto, che è inferiore all'altezza della porta di visualizzazione in questo esempio.

Nota a piè di pagina: Le proprietà flex-flow, flex-direction, flex-wrap avrebbero potuto rendere questo design più facile da implementare. Penso che il contenitore .row non sia necessario a meno che tu non voglia aggiungere dello stile intorno agli elementi (immagine di sfondo, bordi e così via).

Una risorsa utile è: http://demo.agektmr.com/flexbox/

Come centrare gli elementi verticalmente e orizzontalmente in Flexbox

Di seguito ci sono due soluzioni generali di centratura.

Una per gli elementi flex allineati verticalmente (flex-direction: column) e l'altra per gli elementi flex allineati orizzontalmente (flex-direction: row).

In entrambi i casi l'altezza dei div centrati può essere variabile, indefinita, sconosciuta, qualsiasi cosa. L'altezza dei div centrati non ha importanza.

Ecco l'HTML per entrambi:

<div id="container">

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <p>DIV #2</p>
    </div>

</div>

CSS (esclusi gli stili decorativi)

Quando gli elementi flex 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](http://jsfiddle.net/8o29y7pd/)

Quando gli oggetti flessibili sono impilati orizzontalmente:

Adattare la regola flex-direction del 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](http://jsfiddle.net/8o29y7pd/3/)

Centrare il contenuto degli elementi flex

Lo scopo di un contesto di formattazione flex è limitato ad una relazione genitore-figlio. I discendenti di un contenitore flex oltre i figli non partecipano al layout flex e ignorano le proprietà flex. Essenzialmente, le proprietà flex non sono ereditabili oltre i figli.

Quindi, avrai sempre bisogno di applicare display: flex o display: inline-flex ad un elemento padre per applicare le proprietà flex al figlio.

Per centrare verticalmente e/o orizzontalmente il testo o altri contenuti contenuti in un elemento flex, rendere l'elemento un contenitore flex (annidato), e ripetere le regole di centratura.

.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: https://stackoverflow.com/q/25311541/3597276

In alternativa, puoi applicare margin: auto all'elemento di contenuto dell'elemento flex.

p { margin: auto; }

Impara i margini di flex auto qui: Methods for Aligning Flex Items (vedi box#56).

Centrare più linee di elementi flex

Quando un contenitore flex ha più linee (a causa del wrapping) la proprietà align-content sarà necessaria per l'allineamento trasversale.

Dalle specifiche:

[**8.4. Imballaggio delle linee Flex: la proprietà align-content

property**](https://www.w3.org/TR/css-flexbox-1/#align-content-property)

La proprietà align-content allinea le linee di un contenitore flex all'interno del contenitore flex quando c'è spazio extra nell'asse trasversale, in modo simile a come justify-content allinea i singoli elementi all'interno dell'asse principale. Nota, questa proprietà non ha effetto su un contenitore flex a linea singola.

Maggiori dettagli qui: https://stackoverflow.com/q/42613359/3597276

Supporto browser

/h3>

Flexbox è supportato da tutti i principali browser, tranne IE < 10. Alcune versioni recenti dei browser, come Safari 8 e IE10, richiedono prefissi del fornitore. Per un modo rapido per aggiungere i prefissi, usa Autoprefixer. Maggiori dettagli in questa risposta.

---

Soluzione di centratura per i vecchi browser

Per una soluzione alternativa di centratura usando le proprietà di posizionamento e di tabella CSS, vedere questa risposta: https://stackoverflow.com/a/31977476/3597276

Non dimenticate di utilizzare importanti attributi specifici per i browser:

align-items: center; -->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justify-content: center; -->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Potresti leggere questi due link per capire meglio flex: http://css-tricks.com/almanac/properties/j/justify-content/ e http://ptb2.me/flexbox/

Buona fortuna.