text-align: center，margin: 0 auto

要实现这种水平居中，在设置父元素具有text-align:center属性的基础上，必须设置子元素（要居中 

                 的元素）的display:inline-block或者display:inline，即只能实现行内块的水平居中。

 注：简单的实现垂直居中，我们可以发现并不需要对子元素进行特殊设置，我们只需要设置父元素的

                display:table-cell;vertical-align:middle  之后就能实现垂直方向的居中。（这种方式实现的垂直居中，会

                导致水平不居中）

 (3)补充

               1.父元素设置属性为text-align:center,并设置子类快为inline-block那么，子类3个块都会实现水平居中

               2.父元素设置为line-height:= height: 并设置子类块属性为inline-block，那么子类的所有都能实现垂直居中

               

               3.对于text-align:center,如果父类元素的display:inline-flex，则子元素不能实现水平居中

                line-height:100px设置行高，此时给定了基线，此时如果要实现居中，只需要让基线居中，                通过设置vertical-align:middle

              2017.1.13补充，line-height:100px设置行高，此时给定了基线，此时如果要实现居中，只需要让基线居中，                通过设置vertical-align:middle

margin:0 auto；在不同场景下生效条件如下：

        块级元素：给定要居中的块级元素的宽度。

        行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）

        行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）

注：

        ①所有元素也可以通过对父元素设置 text-align：center；的方式来实现居中。（而对于块元素来说，对要居中的元素自身进行设置text-align:center也能实现居中——而无需对其父元素进行设置）

        ②margin:0 auto;可以使盒子居中，text-align:center;可以使文本居中，故有时需要两者结合使用才能使得盒子及其中文本一起居中。例如：