居中问题

（1）
   .div1{ /!*水平居中*!/
            margin:0 auto;
            width:100px;
            height:100px;
            background: #1FC195;
    }

（2）
  .div1{   /*水平居中*/
            position:relative;
            left:50%;
            width:200px;
            height:100px;
            margin-left:-100px;
            background:mediumseagreen;
   }

（3）
  .div1{  /!*水平垂直居中*!/
            position:absolute;
            left:50%;
            top:50%;
            width:200px;
            height:100px;
            margin-left:-100px;
            margin-top:-50px;
            background:mediumseagreen;
   }

（4）
  .div1{  /!*水平垂直居中*!/
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            background: #D66464;
            width:100px;
            height:100px;
   }


（5）
   .div1{  /!*水平垂直居中*!/
            position:absolute;
            left:50%;
            top:50%;
            transform:translateX(-50%);
            transform:translateY(-50%);
            background: #8FBC8F;
            width: 100px;
            height:100px;
    }