水平居中

    1.1 display: inline-block

        在块级父容器中让行内元素或者类行内元素居中，只需使用 text-align: center，

这种方法可以让 inline/inline-block/inline-table/inline/flex 居中

        例子：

                .child {

                      display:inline-block;

                      /*子元素文字会继承居中，因此要在上面写上向左边居中*/

                      text-align:left;

                }

                .parent {

                      text-align:center;

                  }

    1.2 display:table

        table 元素的宽度也是跟着内容走，居中的时候加上 margin 即可。兼容IE8。

如果不设置成table,设置成别的块级元素也可以，但是要强调设置宽度width，不然会拉伸成父元素的宽度。(注意加上 width 这种方法拓展性不好，如果 child div 里面的内容很长的话可能超过设置的 width 的宽度)

        例子：

                .child {

                      display:table;

                      margin:0 auto;

                }

   1.3 position: absolute 

        absolute 元素的宽度默认也是由内容决定

这种方法的优点是居中的元素不会对其他元素产生影响 脱离正常流

        例子：

            .parent {

                  position:relative;

            }

            .child{

                  position:absolute; /*参照物是父容器*/

                  left:50%;

                  transform:translateX(-50%); /*百分比的参照物是自身*/

             }

   1.4 dispaly: flex

        只兼容IE10+

        .parent {

              display:flex;

              justify-content:center;

        }

        /*或者*/

        .child{

              margin：0 auto;

        }