实现垂直居中有哪些方法

html文件中；

   <div class="mydiv">
	  <span class="myspan">我要居中</span>
	</div>

css中：

.mydiv{
	     width:200px;
		 height:200px;
		 border:1px solid red;
	 }
.myspan{
   border:1px solid blue;
 }

 /*方法1：行高 */
  .myspan{
     display:block;
     text-align:center;
	 line-height:200px;
  }
 
  /*方法2：弹性布局*/
  .mydiv{
	 display:flex;
	 justify-content:center;
	 align-items:center;
  }
  
 /*方法3：display:-webkit-box*/
  .mydiv{
   display:table-cell;
   vertical-align:middle;
   text-align:center;
  }
  
 /*方法4：display:flex和margin:auto*/
   .mydiv{
	 display:flex;
   }
   .myspan{
     margin:auto;
   }

/*方法5：display:-webkit-box*/
  .mydiv{
	 display: -webkit-box;
	 -webkit-box-pack:center;
	 -webkit-box-align:center;
	 -webkit-box-orient: vertical;
	 text-align: center
   }

 /*方法6：绝对定位和0*/
     .mydiv{
	   position:relative;
     }
     .myspan{
	   width:50%;
	   height:50%;        
	   margin:auto;		   
	   position:absolute;
	   top:0;left:0;right:0;bottom:0;
     }

  /*方法7：绝对定位和负边距*/
   .mydiv{
	 position:relative;
   }
   .myspan{
     position:absolute;
	 top:50%;
	 left:50%;    <!--此时是span的左上角垂直居中-->
	 width:80px;
	 height:30px;
     margin-top:-15px;
	 margin-left:-40px;
   }
   
/*方法8：display:-webkit-box */
     .mydiv{
	  text-align:center;
	 }
	 .myspan{
	  vertical-align:middle;
	  display:inline-block;
	 }
	 .mydiv:after{
	   content:'';
	   width:0;
	   height:100%;
	   display:inline-block;
	   vertical-align:middle;
	 }
	 
 /*方法9：display:-webkit-box */
   .myspan{
        position: absolute;
        top:50%;
        left:50%;
        width:100%;
        transform:translate(-50%,-50%);
        text-align: center;
    }