元素水平居中的多种实现

水平居中的实现在写样式中经常会用到。因此简单的记录一下。

一、margin和width实现水平居中

第一种方法是最古老的实现方案，也是最常见的方案，在分页容器上定义一个宽度，然后配合margin的左右值为“auto”实现效果。

具体用margin: 0 auto; 或者定义好容器的宽度之后，分别定义margin-left和margin-right均为auto。

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

缺点：有时候很难确定容器的宽度，因此扩展性差，无法自适应未知项情况。

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

display: inline-block这一属性将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果：

优点：简单易懂，扩展性强；

缺点：需要额外处理inline-block的浏览器兼容性，貌似奇葩的IE不会兼容它的。

三、浮动实现水平居中的方法

一种听后摸不着头脑看后幡然醒悟的方法。具体代码如下：

.pagination {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.pagination ul {
  clear: left;
  float: left;
  position: relative;
  left: 50%;/*整个分页向右边移动宽度的50%*/
  text-align: center;
}
.pagination li {
  line-height: 25px;
  margin: 0 5px;
display: block;
  float: left;
  position: relative;
  right: 50%;/*将每个分页项向左边移动宽度的50%*/
}

接下来使用传统的制作方法，我们会让导航浮动到左边，而且每个分页项也进行浮动，就如下图所示一样：

现在要想的办法是让分页导航居中的效果了，在这里是通过“position:relative”属性实现，首先在列表项“ul”上向右移动50%（left:50%;），看到如下图所示：

如上图所示一样，整个分页向右移动了50%的距离，紧接着我们在“li”上也定义“position:relative”属性，但其移动的方向和列表“ul”移动的方向刚好是反方向，而其移动的值保持一致：

这样一来就实现了float浮动居中的效果。是不是感觉略屌的样子啊？

优点：兼容性强，扩展性强；

缺点：实现原理较复杂。