水平居中是经常遇到的问题。看似方法较多，条条大路通罗马。但系统梳理下，其实都围绕着几个思路展开。本文将介绍关于水平居中的4种思路，感兴趣的朋友参考下吧。

前面的话

水平居中是经常遇到的问题。看似方法较多，条条大路通罗马。但系统梳理下，其实都围绕着几个思路展开。本文将介绍关于水平居中的4种思路，感兴趣的朋友参考下吧!

思路一：在父元素中设置text-align:center实现行内元素水平居中

将子元素的display设置为inline-block，使子元素变成行内元素

[注意]若要兼容IE7-浏览器，可使用display:inline;zoom:1;来达到inline-block的效果
 <style>   
    .parent{text-align: center;}       
    .child{display: inline-block;}   
    </style>    
    <div class="parent" style="background-color: gray;">   
      <div class="child" style="background-color: lightblue;">DEMO</div>   
    </div>  

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

【1】将子元素的display为table，使子元素成为块级元素，同时table还具有包裹性，宽度由内容撑开

[注意]若要兼容IE7-浏览器，可把child的结构换成<table class="child">DEMO</table>
 <style>   
    .child{   
        display: table;   
        margin: 0 auto;   
    }   
    </style>    
    <div class="parent" style="background-color: gray;">   
      <div class="child" style="background-color: lightblue;">DEMO</div>   
    </div> 

【2】若子元素定宽，则可以使用绝对定位的盒模型属性，实现居中效果;若不设置宽度时，子元素被拉伸
 <style>   
    .parent{   
      position: relative;   
    }   
    .child{   
     position: absolute;   
     left: 0;   
     rightright: 0;   
     margin: 0 auto;   
     width: 50px;   
    }   
    </style>    
    <div class="parent" style="background-color: gray;height: 20px;">   
        <div class="child" style="background-color: lightblue;">DEMO</div>      
    </div>   

思路三: 通过绝对定位的偏移属性实现水平居中

【1】配合translate()位移函数

translate函数的百分比是相对于自身宽度的，所以left:50%配合translateX(-50%)可实现居中效果

[注意]IE9-浏览器不支持
 <style>   
    .parent{   
      position: relative;   
    }   
    .child{   
      position: absolute;   
      left: 50%;   
      transform:translateX(-50%);   
    }   
    </style>    
    <div class="parent" style="background-color: gray;height: 20px;">   
      <div class="child" style="background-color: lightblue;">DEMO</div>   
    </div>