其中的各种居中（水平居中，垂直居中，水平垂直居中）

《1》水平居中

    <1> 对于行内样式(inline)： text-align:center;

   <2>对于块级元素(block)：设置宽度并且margin-left:auto;   margin-right:auto;

   <3> 对于多个块级元素：  (1)对父元素设置：text-align:center; 对于子元素设置display:inline-block

                                                (2)使用flex布局

《2》垂直居中

     <1> 对于行内样式

                   (1)单行：设置上下的padding相等，或者将line-height和height的值设置为相等的

                   (2)多行：设置上下的padding的值相等；或者设置display:table-cell;和vertical-align: middle;   ；或者使用伪元素

    <2>对于块级元素（下面的两种方法，其中父级元素使用相对布局）

                    (1)  已知高度：子元素使用绝对布局top:50%;再用负的margin-top把子元素往上拉一半的高度

                     (2)未知高度：子元素使用绝对布局position:absolute;top:50%;transform : translateY(-50%);

                     (3) 使用Flexbox:选择方向,justify-content:center;

  《3》水平垂直居中

                (1)定高度：先使用绝对定位top:50%;left:50%;在用和宽高的一半相等的负的margin把子元素拉回

                (2)高度和宽度未知：先用绝对定位top:50%;在设置transform : translate(-50%,-50%);

                (3)使用Flex-box:justify-content:center;  align-items:center;