关于实现元素居中的几种方法

因为要准备找工作了，所以对前端中的一些基础东西进行了复习，也是看到哪儿就写到哪儿吧，仅供自己参看。
这里主要是对元素居中的几种方案的总结：

元素居中

这里放上Html代码

 <div class="test">       
         <div class="center"></div>   
 </div>

1 定位实现元素居中

 body{       
	  height: 700px;       
	   margin: 0;        
	   padding: 0;    }
.test{ 
	background-color: #008c8c;
	 width:100%        
	 height: 100%;        
	 position: relative;  
  }
  .center{            
	  width: 200px;           
	   height: 200px;            
	   background-color: pink;            
	   position: absolute;            
	   left: 0;           
	    right: 0;            
	    top: 0;            
	    bottom: 0;            
	    margin: auto;      
 }

2 tranform实现居中

.center{            
	width: 200px;            
	height: 200px;            
	background-color: pink;            
	position: absolute;            
	left: 50%;            
	top: 50%;            
	transform: translate(-50%,-50%);}

3 margin法实现元素居中

.center{            
	width: 200px;            
	height: 200px;            
	background-color: pink;            
	position: absolute;            
	left: 50%;            
	top: 50%;            
	margin-top: -100px;            
	margin-left: -100Px;        }

flex实现元素居中

flex方法主要是针对父级元素，将其排列方式变成flex布局，通过设置其子元素在水平方向和垂直方向排列方式为居中排列，达到实现元素居中排列的目的。

body{        
	height: 700px;        
	margin: 0;        
	padding: 0;    
	}    
.test{        
	background-color: #008c8c;        
	width: 100%;        
	height: 100%;       
	display: flex;       
	justify-content: center;        
	align-items: center; }
	.center{            
	width: 200px;            
	height: 200px;            
	background-color: pink;
	}