浅谈DIV居中方式（带实例）

   最近的实习任务还是处理官网的样式布局，行外人看起前端来或许觉得很简单，前端不就是HTML+CSS+DIV能有多难？然而，真正当自己做前端起来，就会发现一入前端深似海，把设计图转化成一模一样的网站界面真的很简单，但如果想要兼容各种版本的浏览器呢？再或者在兼容当今五花八门的电脑分辨率呢？哈哈，这就没那么简单了。

   而在前端当中，一个情况总是经常遇到的，就是想要把DIV居中，方法有很多，小弟作为前端新人在此总结几个方法，希望能起一个抛砖引玉的作用，如果有前辈发现不对的地方，请提出来让我多多学习！

DIV居中前HTML代码：

        <div class="A">
            <img src="/source/images/A.png" width="170px" >
            <div class="B">
                <b>详细价格表</b>
            </div>
        </div>

DIV居中前效果：

  方法一:父级DIV设置(text-align:center)

<div class="A" style="text-align:center;">
   <img src="/source/images/A.png" width="170px" >
   <div class="B">
      <b>详细价格表</b>
   </div>
</div>

居中后效果：

结论：该方法能使图片或者文字居中，而且不会因为图片的居中而影响文字的居中，同时因为不用设定宽度，兼容不同分辨率比较好。

方法二：设置固定宽度，margin为自动

<div class="A">
            <img src="/source/images/A.png" width="170px" >
            <div class="B">
                <b>详细价格表</b>
            </div>
        </div>

.A{
  width: 170px;
  margin: auto;
}

居中之后效果：

结论:该方法利用了设置固定宽度才能实现，个人认为该方法兼容效果比较差，因为该方法需要考虑div内容在不同分辨率的窗口中的效果来改变div内容宽度，而且该方法会因为图片、文同时居中而宽度不一样而导致宽度小的内容不能正常居中。不过，这问题可以通过调整宽度小的内容的margin来解决。

方法三：利用父DIV浮动自动获得子DIV宽度，父子DIV相对位置而实现居中

<div class="A">
            <img src="/source/images/A.png" width="170px" >
            <div class="B">
                <b>详细价格表</b>
            </div>
        </div>

.A{
  float: left;
  position: relative;
  left: 50%;
}

.B{
  position: relative;
  left:-50%;
}

居中之后效果：

结论：个人认为该方法是三个方法中最好的，较之方法一，灵活性比较强，可以根据需求随意把居中调整向左右修正。同时，较之二，可以自适应宽度，当文字宽度变化时，不需要再次手动修改样式中div宽度，能有效降低耦合性。并且，当图片跟文字在同一行时，该方法的优点就更加明显，方法一将文字与图片重叠在一起，而方法二则需要手动调整各分辨率下的DIV宽度。但是需要注意的是，因为该方法用到了浮动，所以在该父DIV的下一个兄弟DIV的样式应该添加clear:both;来清除浮动来避免div重叠在一起。