以前要实现水平居中，用的最多的方法就是设定元素宽度，然后设定margin左右的值为auto。例如：
.center{
width: 200px;
margin: 0 auto;
}
12bet,使用这种方法必须设定元素宽度，但是很多时候我们不知道元素宽度，12bet,换句话说就是元素的宽度不是固定的，此时该怎么办呢？其实使用css实现水平居中的方式有多种，这里12博体育,以简单的分页列表为例来说明居中的方式：
这里12bet,讨论六种方案，如果大家还有其他方案，12博体育,欢迎大家提出来。
margin+width
See the Pen NPVGaL by superlin (@superlin) on CodePen.
此种方案在前面已有说明，效果如上。
优点：实现方法简单，兼容性好。
缺点：需要预知宽度，拓展性差。
inline-block
See the Pen EazVbj by superlin (@superlin) on CodePen.
仅仅是inline-block属性是无法让元素水平居中，只需要对父容器稍作修改，设置text-align: center就可以实现居中效果了。
12bet,优点：方法简单，容易理解。
缺点：要处理低版本ie的兼容性
兼容方式：（inline-block的前世今生）
display:inline-block; /* 现代浏览器 +IE6、7 inline 元素 */
*display:inline; /* IE6、7 block 元素 */
*zoom:1;
float
See the Pen qEGOVN by superlin (@superlin) on CodePen.
浮动方案是比较难理解的，详细内容可以阅读Matthew James Taylor写的《Horizontally Centered Menus with no CSS hacks》一文。
.pagination {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
.pagination ul {
clear: left;
float: left;
position: relative;
left: 50%;/*整个分页向右边移动宽度的50%*/
}
.pagination li {
display: block;
float: left;
position: relative;
right: 50%;/*将每个分页项向左边移动宽度的50%*/
}
这里简单介绍一下主要步骤：
没有浮动的div：可以看到宽度为100%。
向左边浮动的div：宽度由div中的内容决定（除非显示设置宽度）。
标准左对齐的菜单：使用浮动将导航浮动到左边，每个分页项也浮动。
向右移动ul：设置ul的position:relative属性，并且向右移动50%（left: 50%）。
向左移动ul中的所有li：在li上也设置position:relative属性，同时向左移动50%（right: 50%）。
通过以上步骤就可以达到我们想要的效果了。
优点：兼容性强，扩展性也比较好；
缺点：实现原理较复杂。
绝对定位
See the Pen myYeqB by superlin (@superlin) on CodePen.
这种方案实际是浮动方案的修改版。
.pagination {
position: relative;
}
.pagination ul {
position: absolute;
left: 50%;
}
.pagination li {
float: left;
position: relative;/*注意，这里不能是absolute*/
right: 50%;
}
优点：扩展性强，兼容性强;
缺点：理解性难。
CSS3的flex
See the Pen XJwmVW by superlin (@superlin) on CodePen.
css3的flex布局是一个十分强大的功能，可以实现十分灵活多变的布局，对于flex布局的请看参考中的链接。
.pagination {
/*一堆兼容代码请看源码*/
display: box;
box-orient: horizontal;
box-pack: center;
}
.pagination li {
float: left;
}
优点：实现便捷，扩展性强
缺点：兼容性差。
CSS3的fit-content
See the Pen xbNwpZ by superlin (@superlin) on CodePen.
“fit-content”是“width”属性新加的一个属性值，配合margin可以让我轻松的实现水平居中的效果。关于fit-content的请看参考中的链接。
.pagination ul {
/*fit-content的兼容代码看源码*/
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.pagination li {
float: left;
}
优点：简单易懂，扩展性强;
缺点：浏览器兼容性差
