css实现水平居中的方法

一直想写一篇关于水平居中的文章，因为水平居中是平时写界面最常用到的。那么如何实现呢，我根据自己的经验以及网上的经验，做了一个小小的总结。

方案一：margin方法

最简单的margin方法：

.center {    width: 960px;    /*如果你想做自适应，可以把宽度设为百分比*/    margin:0 auto;}

优点：实现方法简单易懂，浏览器兼容性强；

缺点：扩展性差

方案二：inline-block实现水平居中方法

仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到

.father {  text-align: center;}.child {  margin: 0 5px;  display: inline-block;  *display: inline;}

通常我用这个属性的时候就是直接

*{ text-align: center;}

然后看哪些元素不会自动居中，再通过margin或者其他方法设置，其实这样很麻烦，因为没有设置过inline-block，回头好好研究一下inline-block。
做点：简单易懂，扩展性强；

缺点：需要额外处理inline-block的浏览器兼容性。

方案三：绝对定位实现水平居中

也是非常常见的一款居中方式：

.father{       position:relative;}.child{    position: absolute;    width: 宽度值;    left: 50%;    margin-left: -(宽度值/2);}   

以下是摘录自w3plus的代码，我也不知道为什么li必须为relative，还说大家懂的。。。有时间自己试一下呢

.pagination {  position: relative;}.pagination ul {  position: absolute;  left: 50%;}.pagination li {  line-height: 25px;  margin: 0 5px; float: left;  position: relative;/*注意，这里不能是absolute，大家懂的*/  right: 50%;}.pagination a {  display: block;  color: #f2f2f2;  text-shadow: 1px 0 0 #101011;  padding: 0 10px;  border-radius: 2px;  box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;  background: linear-gradient(top,#434345,#2f3032);}.pagination a:hover {  text-decoration: none;  box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;  background: linear-gradient(top,#f48b03,#c87100);}   

下面这几种都是我不常用的，所以也就不写了，感觉上面几种常用方法就够了。
下面这几种留着我有时间再去探讨。

方案四：CSS3的flex实现水平居中方法

方案五：CSS3的fit-content实现水平居中方法

方案六：浮动实现水平居中的方法

出处：http://www.w3cplus.com/css/elements-horizontally-center-with-css.html