DIV+CSS实现盒子居中的几种方法比较（考虑兼容性）

例子中html代码如下：

<div class="center"></div>

为了让结果更清晰加上如下的css样式

.center{  width:100px;  height: 100px;  background-color: gray;}

1. 实现水平居中

1) margin: 0 auto——IE6-8，chrome和mozilla测试有效

这是常用的方法，该方法兼容IE6-8，chrome和mozilla

2) 父元素设置text-align: center——但是该方法只适用于IE6，IE7

例如设置：

body{  text-align: cenert;}

3) 利用position：absolute和margin——IE6-8，chrome和mozilla测试有效

.center{  position: absolute;  left: 50%;  margin-left: -50%;}

这里用left：50%使div的左边界距离窗口50%，但是需要向左移动50%的width（div本身的宽度）才能真正实现水平居中；

也可以替换left和margin-left:

.center{  position: absolute;  margin-left: 50%;  left: -50px;}

2. 实现水平垂直居中

1) 利用position: absolute和margin：auto——兼容IE8，chrome和mozilla，但是不兼容IE6-7

.center{  position: absolute;  top:0;  bottom:0;  left:0;    right:0;  margin: auto;}

可能有人认为利用margin: 0 auto可以实现水平居中， 那么margin: auto 0和margin: auto可以分别实现垂直居中和水平垂直居中，但是其实是错误的。前者无法实现居中，而后者也只能实现水平居中。但是配合position: absolute就能实现水平垂直居中。 

2) 利用position: absolute和margin——IE6-8，chrome和mozilla测试有效

.center{  position: absolute;  left: 50%;  margin-left: -50px;  left: 50%;  margin-left: -50px;}

3）利用css3中的flex弹性盒子——不支持IE

<div class="container">  <div class="center"></div></div>

css:

.container{  width:500px;  height:500px;  background:yellow;  display: flex;}.center{  width:100px;  height:100px;  background:gray;  margin:auto}