一.水平居中

<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
1、margin和width实现水平居中
<pre>
.pagination{
width:200px;
margin:0px auto;
}
</pre>
优点：实现简单,易懂，浏览器兼容性强；
缺点：无法确定元素容器的宽度;

2、inline-block实现水平居中方法
<pre>
.pagination{
text-align: center;
}
.pagination li {
display: inline-block;
}
</pre>
做点：实现简单,易懂，扩展性强；
缺点：需要额外处理inline-block的浏览器兼容性（inline-block项与inline-block项由回车符带来的空白间距，而且这个间距并不是所有浏览器都有）；

3、浮动和相对定位实现水平居中的方法
<pre>
.pagination {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
.pagination ul {
position: relative;
float: left;
left: 50%;
text-align: center;
}
.pagination li {
float: left;
position: relative;
right: 50%;
}
</pre>
如：.pagination设置了浮动之后，他的内容有多宽就会撑开有多大的容器

floatnone.png floatleft.png allfloat.png left50.png right50.png

优点：兼容性强，扩展性强；
缺点：实现原理较复杂；

4、绝对定位和相对定位实现水平居中
<pre>
.ele {
position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);
}

但这种实现我们有一个难题，我并不知道元素的宽度是多少，所以我们借助方法三做一点变通：
.pagination {
position: relative;
}
.pagination ul {
position: absolute;
left: 50%;
}
/注意，这里不能是absolute，大家懂的/
.pagination li {
float: left;
position: relative;
right: 50%;
}
</pre>
优点：扩展性强，兼容性强;
缺点：理解性难;

5、绝对定位和tanslateX实现居中布局。
适用于块级元素不给出宽高的情况下(需要借助transtrom的tanslateX方法)。
<pre>
.pagination {
position: relative;
}
.pagination ul{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
</pre>

6、CSS3的flex实现水平居中方法
<pre>
.pagination {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
display: box;
box-orient: horizontal;
box-pack: center;
}
</pre>
优点：实现便捷，扩展性强;
缺点：兼容性差(现在大部分现代浏览器都支持了);
<pre>

parent{

display: flex;
justify-content: center;

}
</pre>

dispaly:box / flexbox / flex区别
<blockquote>flexbox是css灵活盒布局模块，在发展的过程中标准也不断变化：</blockquote>
1.display:box,box-{}是2009的flexbox版本
2.display:flexbox,或者函数flex()，是2011年比较奇怪的杂糅
3.display:flex,flex-{},是目前正在使用的2012年发布的标准
<blockquote>潮流当然是要跟着最新的标准走，但是前端的问题当然要根据支持浏览器的支持情况来决定，如果低版本的浏览器支只支持旧的标准，而我们又需要支持这部分浏览器的话，你也必须写上，但是它们的用法还是很相似的，所以如果为了兼容，同时写上也是无可厚非的。
</blockquote>
7、CSS3的fit-content实现水平居中方法
<pre>
“fit-content”是CSS中给“width”属性新加的一个属性值,得配合margin让我们实现水平居中的效果
.pagination ul {
width: -moz-fit-content;
width:-webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
</pre>
优点：简单易懂，扩展性强;
缺点：浏览器兼容性差;

去w3c学css