父盒子设置弹性布局使子盒子垂直水平居中

         .container{
            width: 500px;
            height: 600px;
            background-color: pink;
            /* 设置为弹性盒子 默认横向摆放*/
            display: flex;

            /* 改变弹性盒子摆放方式
            flex-direction: row | row-reverse | column | column-reverse
            row 默认横向 
            row-reverse 横向反转 类似右浮动
            column 纵向排列
            column-reverse 纵向反转 
            */
            flex-direction: column;

            /* justify-content:flex-start|flex-end|center 
                垂直方向的摆放
            */
            justify-content: center;
            /* 水平方向 */
            /*align-items:  flex-start 居左摆放 |flex-end 居右摆放|center 居中摆放*/
            align-items: center;
        
        }
        .box1{
            height: 50px;
            width: 50px;
            background-color: red;
        }
        .box2{
            height: 50px;
            width: 50px;
            background-color: blue;
        }
        .box3{
            height: 50px;
            width: 50px;
            background-color: green;
        }
 

```html
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>