Вертикально центр div с использованием Flexbox

Question

Я пытаюсь центрировать div по вертикали, используя flexbox. У меня li's с высотой height:100px. Затем я попытался вертикально центрировать его так: align-items: center, а верхняя часть обрезается.

Как я могу вертикально центрировать что-то, используя Flexbox без верхней части, получившей отрезание?

Вот JSFiddle, и вот фрагмент кода:

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

С вашим Flex-Fu ничего плохого, это то, что находится вне ваших flexboxes, что дает вам нежелательные результаты. Взгляните на скрипку и/или фрагмент кода ниже:

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>

Соответствующий код

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

я сбросить CSS ✲ затем применили height: 100vh и width: 100vw до <html>, чтобы каждый дюйм вашего макета был доступен для просмотра - не было неприглядного отсечения. Более подробная информация о vh и vw может быть найдена here.

✲ Все rulsets сброса CSS не являются обязательными, только свойства, необходимые для достижения успеха являются vh и vw.

Answer 2

Это один приемлемо?

#flexWrapper { 

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

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

Чтобы иметь его отзывчивым вам придется использовать% значения вместо пикселей.

Действительно зависит от того, как вы хотите, чтобы макет выглядел, всегда 3 строки и 8 столбцов?