<div class="parent">
		<div class="child">test</div>
	</div>

第一種：

.parent{
	text-align: center;
}
.child{
         display: inline-block;
}

缺點：text-align 會將文字移動，有時需text-align:left解決；

第二種：

.child{
	display: table;
	margin: 0 auto;
}
 

缺點：IE6-7不支援（需將HTML變為table結構）

第三種：

.parent{
	position: relative;
}

.child{
	position: absolute;
	left: 50%;
	transform: translate(-50%);
}

缺點： 相容性不好

第四種：

.parent{
	display: flex;
	justify-content: center;
}

優點：簡潔

缺點：相容性不好

第五種：

.parent{
	display: flex;
}

.child{
       margin:0 auto;
}
 

優點：簡潔

缺點：相容性不好