概述
我们平时看到的居中效果主要分为三大类，水平居中，垂直居中和水平垂直居中，在这里总结以下元素水平居中的方法。
一 定宽自动边距
.center {
width:40px;
margin-left: auto;
margin-right: auto;
}
注意元素一定要定宽
优点：方法简单易懂，浏览器兼容性强
缺点：扩展性差，无法自适应未知项的其他情况。
二 inline-block实现水平居中方法
仅仅inline-block 是无法实现水平居中的，还需要再父元素
中设置text-align: center 才能实现居中效果。
.pagination {
text-align: center;
}
.pagination li {
margin: 0 5px;
display: inline-block;
}
优点：简单易懂， 扩张强
缺点：需要额外处理inline-block的浏览器兼容性问题，如在某些浏览器中出额外出现的空格。
三 浮动实现水平居中的方法
原理是使用浮动配合position定位实现，详细的可以参考Horizontally Centered Menus with no CSS hacks
一 首先是没有浮动的div div是一个块元素， 其默认的宽度为100%,如下图所示：
如果div设置了浮动，那么他的内容设置了多大的宽度就会撑开多大的容器（除显式的设置宽度外）
下面以分页导航栏为例，先让导航栏浮动到左边，其他分页项也进行浮动,如下图所示
接下来运用position:relative；属性，使ul元素相对于父元素定位，让其向右移动50%(left: 50%)，如下图所示
同理，下面对li元素也运用position：relative 属性，使li元素相对于父元素ul定位，使其向左移动 50%(right:50%),效果如下图所示：
浮动居中就成功实现了。
优点：兼容性强，扩展性强
缺点：实现原理较为复杂
四 绝对定位实现水平居中
原理和方法四很相似，不过是改用绝对定位来实现，下面使相关的代码
.element {
position: absolute;
width: 宽度值;
margin-left: -(宽度值/2);
}
优点：兼容性强，扩展性强
缺点：实现原理较为复杂
五 CSS3的flex实现水平居中的方法
CSS的flex属性可以让我们的布局更加灵活和简单，但浏览器的兼容性较差
代码如下
.element {
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: horizonta;
box-pack: center;
}
优点：实现便捷，可扩展性强
缺点： 兼容性差
