將多行彈性項目垂直居中

Question

我正在嘗試垂直對齊包裝紙的子DIV，但不幸的是沒有。 要求是具有兩個子DIV垂直和水平居中的屏幕包裝紙的全寬和高度。 （div的高度由jQuery處理以使窗口高）

注意：我不想讓子DIV width:100%

這是我嘗試過的：

 .wrapper { width: 100%; height:100%; min-height:600px; /*just for example*/ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background:#e1e1e1; } .row1 { background: #cdcdcd; } .row2 { background: #404040; color:#fff; } 

 <div class="wrapper"> <div class="row1">This is row one</div> <div class="row2">This is row two</div> </div> 

Answer 1

flex容器的初始設置為flex-direction: row 。 這意味着容器的子代（“柔性物品”）將連續排成一行。

要覆蓋此默認設置，您可以添加flex-wrap: wrap到容器中，並將項目的width: 100% ，這將強制每行一個項目。 但是您要說的是這種情況下這種方法不是一種選擇。

因此，另一個選擇是將容器切換為flex-direction: column 。

 .wrapper { width: 100%; height:100%; min-height:600px; /*just for example*/ display: flex; flex-direction: column; /* NEW */ justify-content: center; align-items: center; flex-wrap: wrap; background:#e1e1e1; } .row1 { background: #cdcdcd; } .row2 { background: #404040; color:#fff; } 

 <div class="wrapper"> <div class="row1">This is row one</div> <div class="row2">This is row two</div> </div>