CSS实现水平居中的4种思路简要概述

前面的话
 
　　水平居中是经常遇到的问题。看似方法较多，条条大路通罗马。但系统梳理下，其实都围绕着几个思路展开。本文将介绍关于水平居中的4种思路，感兴趣的朋友参考下吧！
 
思路一：在父元素中设置text-align:center实现行内元素水平居中
 
　　将子元素的display设置为inline-block，使子元素变成行内元素
 
　　[注意]若要兼容IE7-浏览器，可使用display:inline;zoom:1;来达到inline-block的效果

CSS Code
复制内容到剪贴板

1. <style>   
2. .parent{text-align: center;}       
3. .child{display: inline–block;}   
4. </style>    
5. <div class=“parent” style=“background-color: gray;”>   
6.   <div class=“child” style=“background-color: lightblue;”>DEMO</div>   
7. </div>   

思路二：在本身元素设置margin: 0 auto实现块级元素水平居中