元素垂直水平居中

   水平垂直居中包含两个初始条件：父元素为块级元素，高度宽度已设定好。

  子元素为行内元素，单行

    水平居中：将父元素设置为text-align：center

    垂直居中：设置父元素line-height值与height值相同

    或者将子元素设置为display：inline-block,按块级元素方法进行水平垂直居中。

  子元素为多行文本

    设置为inline-block

  子元素为图片

    垂直居中：父元素用行高替代高度，字体大小设置为0,

         子元素设置vertical-align:middle    

  子元素为块级元素，宽、高度未设定

    水平居中：块级子元素宽度会与父元素相同

          行内块级元素：利用浮动的包裹性和百分比相对定位

              为子元素外面再加上一层div，

                 将其设置为：float：left

                         position：relative

                         left：50%

                 将子元素设置为：position：relative

                            left:-50%

    垂直居中：a.父元素设置display：table-cell

                 vertial-align：middle

          b.父元素设置display：flex

                 align-items：center

  子元素为块级元素，宽、高已设定

     水平居中：a.子元素设置：margin：0 auto

            b.计算父元素的padding值设置居中

            c.计算子元素的margin值设置居中

            d.绝对定位

                父元素：position：relative

                子元素：position：absolute

                     left：50%

                 然后调整子元素回退一半宽度即可：

                     a.margin-left：-50%

                     b.transform:translateX(-50%);

            e.flex布局

               父元素设置display：flex

                                                         justify-content：center

     垂直居中：

            a.计算父元素的padding值设置居中

            b.计算子元素的margin值设置居中

            c.绝对定位

                父元素：position：relative

                子元素：position：absolute

                     left：50%

                 然后调整子元素回退一半宽度即可：

                      a.margin-left：-50%

                      b.transform:translateX(-50%);

            d.flex布局

               父元素设置display：flex

                                                           align-items：center

                    e.父元素设置display：table-cell

                    vertial-align：middle