5种方式实现CSS元素水平居中，实用又简单！

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;
}