1. margin：auto

	.father {
		width: 300px;
		height: 300px;
		background: yellow;
		position: relative;
	}
	.son {
		width: 200px;
		height: 200px;
		background: blue;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

效果圖： 當元素絕對定位時，它會根據離他最近的一個非static定位的父元素進行定位，這裡應該根據父元素定位。

2. 負margin

	.father {
           width: 400px;
           height: 300px;
           background: yellow;
           position: relative;
       }
       .son {
           width: 200px;
           height: 200px;
           background: pink;
           position: absolute;
           top: 50%;
           left: 50%;
           margin-top
 
: -100px;
           margin-left: -100px;
       }

效果圖： 首先用top:50%;和left:50%;讓子元素的座標原點（左上角）移動到父元素的中心，然後再利用負margin讓它往左偏移自身寬的一半，再往上偏移自身高的一半，這樣子元素的中心點就跟父元素的中心點對齊了。

這種情況只適用於子元素自身的寬高已知的情況，若寬高不確定，如子元素為文字，則寬高由內容確定，可以使用下面的方法：

3.transform()

	.father {
          width: 300px;
          height: 300px;
          background
 
: yellow;
          position: relative;
      }
      .son {
      	  background: pink; /*為了觀察方便設定顏色*/
          position:absolute;
          top:50%;
          left:50%;
          transform:translate(-50%,-50%);
      }

效果圖： 子元素設定相對於父元素進行絕對定位，首先將子元素左上角定位到父元素中心，即使用top:50%和left:50%定位到中心，然後使用translate()相對於自身的高寬的一半進行移動，即可把自己的中心移到父元素的中心。 這裡用到的原理是translate函式中的百分比是相對於元素自身的高寬來計算的。

4.flex

方法一： 當父元素設定為display:flex後，子元素設定margin:auto就可以相對於父元素在垂直和水平方向進行居中。

	.father {
		width: 200px;
		height: 200px;
		background: yellow;
		display: flex;
	}
	.son {
		 margin: auto;
	}

效果圖：

方法二： 也可以使用flex的容器屬性直接給父元素設定屬性讓其內的專案居中：

	.father {
		width: 200px;
		height: 200px;
		background: yellow;
		display: flex;
		align-items:center; /*垂直居中*/
		justify-content: center; /*水平居中*/
	}

效果圖：