实现元素水平居中的五种方法

概述

我们平时看到的居中效果主要分为三大类，水平居中，垂直居中和水平垂直居中，在这里总结以下元素水平居中的方法。

一 定宽自动边距

.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;
}

优点：实现便捷，可扩展性强
缺点： 兼容性差