跟风总结一波对齐方法（居中篇）

居中对齐方式有很多，需要根据是内联元素还是块级元素、有设width和没有设width、兼容性问题、对其他元素影响来考虑，下面列出常用的居中对齐方式，以及其各自的特点。

1. 内联元素

   使用text-align:center来实现居中,这种方法兼容性很好，就是应用范围不广，一般用于内联元素的居中

     .box {
         width: 350px;
         height: 160px;
         background: green;
         text-align:center;
     }
    .box span {
         padding: 6px 10px;
         background: #fff;
    }
   

     <div class="box">
         <span>看什么6</span>
     </div>
   

2. text-align:center+display:inline-block

   inline-block在IE8以上的浏览器适用，兼容性还行

     <style type="text/css" media="screen">
         .parent{
             text-align:center;
         }
         .child{
             width:200px;
             height:200px;
             background:green;
             display:inline-block;
             text-align:center;
         }
     </style>
   

     <div class="parent">
         <div class="child">看什么6</div>
     </div>
   

3. display : table+margin : 0 auto

   Html代码和上面例子一样，这个方法的兼容性也是IE8+，兼容性还不错

      <style type="text/css" media="screen">
         .parent{
             text-align:center;
         }
         .child{
             width:200px;
             height:200px;
             background:green;
             display:table;
             margin:0 auto;
         }
       </style>
   

4. display: table-cell+ text-align : center +display : inline-block

   兼容性IE8+

     <style type="text/css" media="screen">
         .parent{
           width:400px;
           height:200px;
           background:green;
           text-align:center;
           display:table-cell;
         }
         .child{
           width:100px;
           height:100px;
           background:pink;
           display:inline-block;
         }
     </style>
   

5. position：absolute+transform

   这种方法应该是大家比较常见的，但是其兼容性一般，transform支持IE9+：
   同样是上的html代码

     <style type="text/css" media="screen">
       .parent{
             width:400px;
             height:200px;
             background:green;
             position:relative;
         }
         .child{
            width:100px;
            height:100px;
            background:pink;
            position:absolute;
            left:50%;
            -webkit-transform: translateX(-50%);
               -moz-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                 -o-transform: translateX(-50%);
                    transform: translateX(-50%);
         }
     </style>
   

6. position : absolute+margin-left : -0.5*width

   这种方法和上一种很像，区别就在于用margin-left代替了transform，所以兼容性比上一个方法好

     <style type="text/css" media="screen">
       .parent{
             width:400px;
             height:200px;
             background:green;
             position:relative;
         }
         .child{
            width:100px;
            height:100px;
            background:pink;
            position:absolute;
            left:50%;
            margin-left:-50px;/*这个值必须为宽度值的一半*/
         }
     </style>
   

   相同原理更简便的写法：

     <style type="text/css" media="screen">
       .parent{
             width:400px;
             height:200px;
             background:green;
             position:relative;
         }
         .child{
            width:100px;
            height:100px;
            background:pink;
            position:absolute;
            left: calc(50% - 50px);
         }
   </style>
   

7. display : flex+justify-content

   这种方法相对比较好写，也很强大，但是缺点就是兼容性不行，需要些Hack

     <style type="text/css" media="screen">
       .parent{
           width:400px;
           height:200px;
           background:green;
           display:flex;
           justify-content:center;
       }
       .child{
           width:100px;
           height:100px;
           background:pink;
       }
   </style>
   

8. position : absolute + margin:0 auto

   这种方法的兼容性很不错，就是需要设置宽高

   <style type="text/css" media="screen">
       .parent{
             width:400px;
             height:200px;
             background:green;
             position:relative;
         }
         .child{
            width:100px;
            height:100px;
            background:pink;
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:0 auto;
         }
     </style>
   

差不多能想到的就这一些，如果还有更好的方法欢迎补充，文章纯属原创，若有出错，欢迎指出，如果对你有用，方便点个喜欢。