使用Flexbox垂直居中div

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沒有什麼問題，這是您的柔光箱外面給你帶來的不良結果。看看小提琴和/或摘錄如下：

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。

✲所有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

有它響應你將不得不使用，而不是PX％的值。

真的取決於你想要佈局看起來如何，總是3行8列？