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

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

CSS Code 复制内容到剪贴板

   </span></span></li> 
    <li><span>.parent{</span><span class="keyword">text-align</span><span>: </span><span class="string">center</span><span>;}       </span></li> 
    <li class="alt"><span>.child{</span><span class="keyword">display</span><span>: </span><span class="string">inline</span><span>-</span><span class="string">block</span><span>;}   </span></li> 
    <li><span>
"parent" style="background-color: gray;">
  "child" style="background-color: lightblue;">DEMO

  

   

思路二：在本身元素设置margin: 0 auto实现块级元素水平居中
 
【1】将子元素的display为table，使子元素成为块级元素，同时table还具有包裹性，宽度由内容撑开
 
　　[注意]若要兼容IE7-浏览器，可把child的结构换成

DEMO

CSS Code 复制内容到剪贴板

   </span></span></li> 
    <li><span>.child{   </span></li> 
    <li class="alt"><span>    </span><span class="keyword">display</span><span>: table;   </span></li> 
    <li><span>    </span><span class="keyword">margin</span><span>: 0 </span><span class="string">auto</span><span>;   </span></li> 
    <li class="alt"><span>}   </span></li> 
    <li><span>
"parent" style="background-color: gray;">
  "child" style="background-color: lightblue;">DEMO