場景1，已設定父元素高度，子元素是行內元素，則實現是由其內容高度（line-height）撐開的

<div class="father">
	<span class="child">no</span>
</div>

.father{
	height: 200px;
	width: 200px;
	line-height: 200px;	/*垂直居中*/
	text-align: center;	/*水平居中*/
}
.child{
	background: gray;
}

場景2，子元素是塊級元素且沒有設定高度（未知子元素高度）

<div class="father">
	<div class="child">no</div>
</div>

.father{
	height: 200px;
	width: 200px;
	display: table-cell;
	vertical-align: middle;	/*垂直居中*/
	text-align: center;		/*水平居中*/
}
.child{
	background: gray;
	display: inline-block;
}

場景3，子元素是塊級元素，已設定高度（已知子元素高度）

.father{
	height: 200px;
	width: 200px;
	position: relative;
}
.child{
	height: 100px;
	width: 100px;
	position: absolute;	/*垂直居中*  也可採用margin方法（father-child/2）*/
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: gray;
}

（還可採用flex方法）