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