flex布局思路

 1.在一行 水準垂直居中，不管子元素有多少，都在同一行顯示，百分比也會被壓縮。

.aa{
    display: flex;
    align-items: center;
    justify-content: center;
}      

<ul class="aa">
    <li></li>
    <li></li>
    <li></li>
</ul>      

 2. 多行水準垂直居中

<ul class="aa">
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>      

.aa{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;/*縱向排列*/
    /*flex-wrap: wrap;!*超出換行*!*/
}
.aa li{
    width: 50%;
    margin-right: 5px;
    background: red;
    text-align: center;
}