CSS居中大全

默认的HTML结构和基本的样式为：

    <div class="parent">
        <div class="child">Child</div>
    </div>
    
    <style>
      .parent{width: 200px; height: 100px; background-color: orange;}
      .child{background-color: green; color: #fff; width: 80px;}
    </style>

水平居中

1. text-align：center

   .parent{text-align: center;}
   .child{display: inline-block;}
       
   

   优点： 兼容性都很好。（display:inline-block可以采用*zoom:1; *display:inline;兼容）

   缺点： text-align会让子元素文字都居中显示

2. margin：0 auto

   .child{margin: 0 auto;}
       
   

   优点： 比较通用的解决方案，兼容性也很好。

3. position: absolute

   .parent{position: relative;}
   .child{position: absolute;left:50%;transform: translateX(-50%);}
       
   

   优点：居中元素不对其他元素产生影响。

   缺点：CSS3新属性支持IE9+，低版本浏览器不支持。

4. flex

       .parent{display: flex; justify-content: center;}
   
   

   flex是2009年w3c提出的一种布局解决方案，简单易用。

5. table

       .parent{display: table;}
       .child{display: table-cell;text-align: center;}
   

   借组table的特性实现居中，兼容性好。

垂直居中

1. padding

   在父元素没有固定而子元素固定的情况下，可以采用padding实现。

2. table

       .parent{display: table;}
       .child{display: table-cell;vertical-align: middle;}
   

3. absoulte

       .parent{position: relative;}
       .child{position: absolute;top:50%;transform: translateY(-50%);}
       
   

4. vertical-align: middle

   借助table和vartical-align：middle可以实现垂直居中；同时可以借组before伪类以及inline-block实现居中

       .parent{
           position: relative; /* z-index*/
       }
       .parent::before{
           content: " ";
           height: 100%;
           display: inline-block;/*能够触发vertical-align生效的条件：inline-block,原生具有inline-block特性（img button） table-cell等*/
           width: 0%;
           vertical-align: middle;
       }
       .child{
           display: inline-block;
           vertical-align: middle;
       }
   

5. flex

       .parent{display: flex;justify-content: center;flex-direction: column;}
   

垂直水平都居中

1. absoulte

   假设不知道元素宽度时，可以采用下面方式：

       .parent{position: relative;}
       .child{position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);}
   

   如果知道子元素的宽高，可以采用：margin-left: -100px; margin-top: -100px;此类进行表示

2. flex

       .parent{display: flex; justify-content: center; align-items: center;}
   

参考文章

1. CSS居中完全指南
2. CSS居中完整版
3. Flex 布局教程：语法篇--阮一峰