单个div的水平垂直居中问题总结

1. 单行文本水平垂直居中

   只需设置文本的行高等于容器的高度即可

   .test{
       height:25px;
       text-align:center;
   }
   

2. 已知大小的div在页面中居中
   假设这个div的宽高皆为200px;那么我们绝对定位它，距离父元素左上的距离皆为50%，在设置margin的负值来调整位置，负值为自身宽高的一半

   .test {
       position: absolute;
       top: 50%;
       left: 50%;
       margin-left: -100px;
       margin-top: -100px;
   }
   

3. 未知大小的div和多行文本在页面中的居中
   当此div的宽高皆未知时（多行文本肯定未知），我们可以按照第二种方法先绝对定位，设置top和left的值为50%,再用 transform中translate来调整位置,

   .test {
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%,-50%);
       transform: translate(-50%,-50%);
   }