Verticalmente Centra un div usando Flexbox

Question

Sto provando a centrare uno div verticalmente, usando flexbox. Ho li's con un'altezza di height:100px. Ho quindi provato a centrarlo verticalmente in questo modo: align-items: center e la parte superiore viene tagliata.

Come posso centrare verticalmente qualcosa usando Flexbox senza tagliare la parte superiore?

Ecco il JSFiddle, ed ecco il frammento di codice:

body, 
 
html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#flexWrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: aqua; 
 
    height: 100%; 
 
    align-items: center; 
 
    /* This statement makes the problem */ 
 
    overflow: auto; 
 
} 
 
#flexContainer { 
 
    width: 70%; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
    align-content: flex-start; 
 
} 
 
li { 
 
    background-color: tomato; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
    flex-basis: calc(100%/3); 
 
    height: 100px; 
 
}

<div id="flexWrapper"> 
 
    <ul id="flexContainer"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
    <li class="flex-item">7</li> 
 
    <li class="flex-item">8</li> 
 
    <li class="flex-item">9</li> 
 
    <li class="flex-item">10</li> 
 
    <li class="flex-item">11</li> 
 
    <li class="flex-item">12</li> 
 
    <li class="flex-item">13</li> 
 
    <li class="flex-item">14</li> 
 
    <li class="flex-item">15</li> 
 
    <li class="flex-item">16</li> 
 
    <li class="flex-item">17</li> 
 
    <li class="flex-item">18</li> 
 
    <li class="flex-item">19</li> 
 
    <li class="flex-item">20</li> 
 
    <li class="flex-item">21</li> 
 
    <li class="flex-item">22</li> 
 
    <li class="flex-item">23</li> 
 
    <li class="flex-item">24</li> 
 
    </ul> 
 
</div>

Answer 1

Non c'è niente di sbagliato nel tuo Flex-Fu, è ciò che è al di fuori delle tue Flexbox che ti sta dando risultati indesiderati. Date un'occhiata al violino e/o frammento di seguito:

Fiddle

html { 
 
    box-sizing: border-box; 
 
    font: 400 16px/1.5 'Source Code Pro'; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0 solid transparent; 
 
} 
 
#flexWrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: aqua; 
 
    height: 100%; 
 
    align-items: center; 
 
    /* This statement makes the problem */ 
 
    overflow: auto; 
 
} 
 
#flexContainer { 
 
    width: 70%; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
    align-content: flex-start; 
 
} 
 
li { 
 
    background-color: tomato; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
    flex-basis: calc(100%/3); 
 
    height: 100px; 
 
}

<div id="flexWrapper"> 
 
    <ul id="flexContainer"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
    <li class="flex-item">7</li> 
 
    <li class="flex-item">8</li> 
 
    <li class="flex-item">9</li> 
 
    <li class="flex-item">10</li> 
 
    <li class="flex-item">11</li> 
 
    <li class="flex-item">12</li> 
 
    <li class="flex-item">13</li> 
 
    <li class="flex-item">14</li> 
 
    <li class="flex-item">15</li> 
 
    <li class="flex-item">16</li> 
 
    <li class="flex-item">17</li> 
 
    <li class="flex-item">18</li> 
 
    <li class="flex-item">19</li> 
 
    <li class="flex-item">20</li> 
 
    <li class="flex-item">21</li> 
 
    <li class="flex-item">22</li> 
 
    <li class="flex-item">23</li> 
 
    <li class="flex-item">24</li> 
 
    </ul> 
 
</div>

relativo codice

html { 
    box-sizing: border-box; 
    font: 400 16px/1.5 'Source Code Pro'; 
    height: 100vh; 
    width: 100vw; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
    margin: 0; 
    padding: 0; 
    border: 0 solid transparent; 
} 

I ha ripristinato il CSS ✲ quindi applicato height: 100vh e width: 100vw a <html> in modo che ogni pollice del tuo layout sia visualizzabile - nessun taglio sgradevole. Ulteriori dettagli su vh e vw possono essere trovati here.

✲ Tutti rulsets di reset CSS sono opzionali, le uniche proprietà richieste per avere successo sono vh e vw.

Answer 2

È questo uno accettabile?

#flexWrapper { 

justify-content: center; 
background-color: aqua; 
height: 100%; 
width:70%; 
margin:0 auto; 
} 

http://codepen.io/damianocel/pen/gavEzv

Per averlo reattivo si dovrà utilizzare valori% invece di px.

Dipende davvero dal modo in cui si desidera visualizzare il layout, sempre 3 righe e 8 colonne?