垂直居中的方法

1. 定位+外边距：盒子已知宽高

    position:absolute;left: 50%;top: 50%;margin-left: -自身一半宽度;margin-top: -自身一般宽度;

2. 定位+transfrom：盒子高度已知

     #container{

              position: relative; border: 1px solid red; width: 800px; height: 600px;

          }

    #center{

              width: 100px; height: 100px; background: blue;

              position: absolute; top: 50%;left: 50%;transform: translate(-50%,-50%);

        }

3. flex布局

    父级：

       display:flex;

       align-items:center;

       justify-content:center;