让盒子居中的几种常用的方式~

结构：

<div class="wrapper">
	<div class="box"></div>
 </div>

样式一,也是最传统的方法,使用定位，需要知道自身的宽高：

.wrapper{
 	position: relative;
 	width: 400px;
 	height: 400px;
 	background-color: aqua;	
 }
 .box{
 	position: absolute;
 	width: 100px;
 	height: 100px;
 	background-color: red;
 	left: 50%;
 	top:50%;
 	margin-left: -50px;
 	margin-top: -50px;
 }

样式二，使用定位，使用css3新特效translate：

.wrapper{
   	position: relative;
   	width: 400px;
   	height: 400px;
   	background-color: aqua;	
  }
 .box{
  	position: absolute;
  	width: 100px;
  	height: 100px;
  	background-color: red;
  	left: 50%;
  	top:50%;
  	transform: translate(-50%,-50%);
  }

样式三，利用flex(弹性布局)：

.wrapper{
   	display: flex;
   	width: 400px;
   	height: 400px;
   	background-color: aqua;	
   	justify-content: center;
   	align-items: center;
 }
 .box{
 	width: 100px;
 	height: 100px;
    background-color: red;	
 }

样式四，使用定位，可以不知道自身宽高，但是你设置的时候必须要有宽高：

 .wrapper{
 	display: flex;
 	width: 200px;
 	height: 400px;
 	background-color: aqua;	
 	position: relative;
 }
 .box{
 	width: 100px;
 	height: 100px;
 	background-color: red;	
 	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
 }

样式五，利用justify-content:space-around;(用的极少)：

.wrapper{
 	display: flex;
 	width: 400px;
 	height: 400px;
 	background-color: aqua;	
 	/*justify-content: space-between;  （左右两边对齐）*/
 	justify-content: space-around;
 	align-items: center;
 }
 .box{
 	width: 100px;
 	height: 100px;
 	background-color: red;	
 }

样式六，利用display: table-cell; vertical-align: middle：

 .wrapper{
 	display: flex;
 	width: 400px;
 	height: 400px;
 	background-color: aqua;	
    display: table-cell;
    vertical-align: middle;
 }
 .box{
 	width: 100px;
 	height: 100px;
 	background-color: red;	
    margin: auto;
 }

方式。。。。。。。。。。。。。。。。

flex扩展:
justify-content: center; 水平居中
justify-content: space-between; 两端对齐
justify-content: space-around; 盒子四周距离相等（可以用来居中）
justify-content: flex-start; 左端对齐
justify-content: flex-end; 右端对齐