本文共 2045 字，大约阅读时间需要 6 分钟。

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

-------------------------------------最传统的方法

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

---------------------------------拓展

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

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