盒子居中的几种常用方法

CSS 盒子居中的六种常用方法

<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;
 }

-------------------------------------利用transform

.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;	
 }

---------------------------------利用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;	
 }

---

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

---

---------------------------------新学的

 .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;
 }

---------------------------------利用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;
 }