垂直居中多行弹性项目
我试图垂直对齐包装的孩子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> 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>