實現盒子水平居中/垂直居中的方法

一、盒子水平居中

1.margin: 0 auto;

margin: 0 auto;

.father {
    	width: 400px;
    	height: 200px;
    	border: 1px solid gray;
    	margin: 0 atuo;       /* 使父盒子在瀏覽器水平居中*/
}
.son {
   	width: 100px;
   	height: 50px;
   	border: 1px solid red;  
   	margin: 0 atuo;       /* 使子盒子在父盒子水平居中*/
}  

2.使用margin計算盒子左右邊距

前提：寬度固定的元素

直接計算子盒子水平居中時父、子盒子在中間時的間距。注意算上子盒子的邊框寬度。

.father {
     width: 400px;
     height: 200px;
     border: 1px solid gray;
}  
.son {
	width: 100px;
    	height: 50px;
   	border: 1px solid red;  
   	margin-left: 149px;   /* （400-102)/2=74px */
}

3.定位實現

父相子絕

1. 首先讓盒子left：50%。走父盒子的一半大小。
2. 然後再讓盒子走自己外邊距負的一半值就可以了。margin-left: - px;走自己的一半大小。

實現：

.father {
	 width: 800px;
	 height: 400px;
	 border: 1px solid gray;
	 position: relative;
}
.son {
 	width:100px;
 	height:40px;
 	border: 1px solid red;
 	position: absolute;
 	left: 400px;         /*  1.走left父盒子的一半 */
	margin-left: -50px;    /* 2. 外邊距走自己寬度一半 */
	/* 或者CSS3的transform: translate（-50%)；也可走自己寬帶一半*/
}

4.盒子轉爲行內塊元素，然後使用text-align屬性

將子盒子設置爲行內塊元素display: inline-block;和父元素設置text-align： center;

.father {
  	width: 400px;
    	height: 200px;
    	border: 1px solid gray;
    	text-align: center;      /* 父盒子把行內塊元素實現文本對齊 */
}
.son {
   	width: 100px;
  	 height: 50px;
   	border: 1px solid red;
   	display: inline-block;        /* 將子盒子設置爲行內塊元素 */
}

---

二、盒子垂直居中

1.定位實現

算法：

1. 首先讓盒子的上邊緣和父盒子的水平中心線重疊。 top：50%;這是走父盒子的一半大小。
2. 然後再讓盒子走自己外邊距負的一半值就可以了。 margin-top: - px; 這是走自己的一半大小。

實現：

.father {
   	width: 400px;
   	height: 200px;
   	border: 1px solid gray;
   	position: relative;
}
.son {
   width: 100px;
   height: 50px;
   border: 1px solid red;
   position: absolute;
   top: 50%;                 /*  1.往下走父盒子的一半 */
   margin-top: -25px;     /* 2.走往回自己的一半*/
   /* 或者CSS3的transform: translateY（-50%)；也可走自己寬帶一半*/
}

2.使用表格的vertical-align: middle實現（藉助display:table-cell）

給父元素設置display:cell-table；和vertical-align: middle；

.father {
    	width: 400px;
    	height: 200px;
    	border: 1px solid gray;
    	display: table-cell;  /* 可以被vertical-align: middle限制*/ 
    	vertial-align: middle;
}
.son {
 	width: 100px;
   	height: 50px;
   	border: 1px solid red;
}

3.使用margin計算盒子上下邊距

前提：有固定的高度

直接計算子盒子與父盒子高度之差再除以2就可以。注意算上子盒子的邊框。

.father {
     width: 400px;
     height: 200px;
     border: 1px solid gray;
}
.son {
  	width: 100px;
    	height: 50px;
  	border: 1px solid red;
  	margin-top: 74px;       /* （300-52)/2=74px */ 
}