1.常規方法 - 定寬元素

html部分：
<div class="container">
	<div class="center"></div>
</container>

CSS部分：
/*公用*/
body,div{
	margin: 0;
}
.container{
	background: beige;
	height: 1000px;
}
/*居中*/
.center{
	width:300px;
	height:300px;
	margin:auto;
	background: aqua;
}

此方法缺點：內層元素必須設定（固定）寬度

2.不定寬元素 - 設定行內塊

然而很多時候，我們並不知道需要居中元素的寬度，或者其寬度是隨後臺數據變化的。

下文開始，我們以“分頁效果”為例，詮釋“不固定寬度”的元素如何設定水平居中：

html部分（外層div.container略）：
<div class="pages">
    	<li><</li>
    	<li>1</li>
   	<li>2</li>
   	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    	<li>></li>
</div>

CSS部分（前文公用部分略）：
/*分頁公用*/
li{
    	list-style-type: none;
    	width: 25px;
    	height: 25px;
    	text-align: center;
    	line-height: 25px;
    	background: black;
    	color: #fff;
    	border-radius: 3px;
    	cursor: pointer;
}
li:hover{
    	background: darkorange;
}
/*設定行內塊*/
.pages{
    	margin-top: 20px;
    	text-align: center;
}
.pages li{
    	display: inline-block;
}
 

此方法缺點：需要解決inline-block帶來的預設間距（瀏覽器自動設定）

3.不定寬元素 - 設定浮動

用浮動的辦法，即可避開瀏覽器帶來的inline-block預設間距

思路：

1.外層相對定位，內層相對定位

2.外層左浮動，內層左浮動

3.外層右移50%，內層左移50%

html部分不變，為避免重複class改為pages2，後文同理
CSS部分：
.pages2{
    	position: relative;
    	float: left;		//外層左浮 -> 內層寬度剛好撐開外層容器
    	left: 50%;	//外層右移50%
}
.pages2 li{
    	float: left;
    	position: relative;
    	right: 50%;	//內層左移50%
}
.pages2 li:not(:first-child){
    	margin-left:5px;
}
 

注：外層元素一旦設定float屬性，內層將自動剛好撐開外層寬度，等同於為外層設定display: inline-block;

4.不定寬元素 - 絕對定位

思路：

1.外層絕對定位，內層相對定位，外層的外層相對定位

 2.外層左浮動，內層左浮動

 3.外層右移50%，內層左移50%

CSS部分：
.container{
    	position: relative;		//外層的外層相對定位
}
.pages3{
    	position: absolute;	//外層絕對定位
    	float: left;
    	left: 50%;
}
.pages3 li{
    	float: left;
    	position: relative;		//內層相對定位
    	right: 50%;
}
.pages3 li:not(:first-child){
    	margin-left:5px;
}

5.CSS新特性 - fit-content

CSS3新特性width: fit-content，只需配合margin: auto，即可巧妙將元素水平居中

（fit-content目前僅支援谷歌和火狐瀏覽器，但非常適合移動端開發！）

.pages4{
    	width: fit-content;
    	width:-moz-fit-content;
    	margin:auto;
}
.pages4 li{
    	float: left;
}
.pages4 li:not(:first-child){
    	margin-left:5px;
}