Vertikal ein div mit Flexbox zentrieren

Question

Ich versuche ein div vertikal zu zentrieren, mit flexbox. Ich habe li's mit einer Höhe von height:100px. Ich habe dann versucht, es vertikal so zu zentrieren: align-items: center, und der obere Teil wird abgeschnitten.

Wie kann ich unter Verwendung von Flexbox etwas vertikal zentrieren, ohne dass der obere Teil abgeschnitten wird?

Hier ist die JSFiddle, und hier ist der Code-Schnipsel:

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

Nichts ist falsch mit Ihrem Flex-Fu, es ist das, was außerhalb Ihrer Flexboxen Ihnen unerwünschte Ergebnisse liefert. Werfen Sie einen Blick auf die Fiddle und/oder Code-Schnipsel unten:

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>

Relevante-Code

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; 
} 

ich die CSS-Reset ✲ dann angewendet height: 100vh und width: 100vw zu <html>, so dass jeder Zoll Ihres Layouts sichtbar ist - keine unschöne Abschaltung. Weitere Details zu vh und vw können here gefunden werden.

✲ All CSS-Reset rulsets ist optional, die einzigen Eigenschaften erforderlich sind, um zu folgen vh und vw.

Answer 2

Ist das ein akzeptabel?

#flexWrapper { 

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

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

Um es ansprechbar Sie% Werte müssen statt px verwenden.

Kommt es wirklich darauf an, wie das Layout aussehen soll, immer 3 Zeilen und 8 Spalten?