******水平居中******
      1.text-align:center
             *对父元素设置text-align:center，子元素即可居中，但是子元素必须是图片，文字等行内元素。如果子元素有一定宽度,可以设置子元素display:inline-block;
      2.margin: 0 auto;
             *元素本身设置 margin: 0 auto; 这种方法对能设置宽度的元素起作用.
             *若不能设置宽度，如p标签，可以给p设置display:block;
      3.position:absolute;
          left:50%;
          transform: translateX(-50%);
          *不需要知道子元素的宽度，但要给父元素设置相对定位relative
      4.flex 弹性布局
 
******垂直居中******
       1.文字垂直居中；将height 和line-height设置成一样高
       2.子绝父相 
/*子元素*/
position: absolute;
top: 0px;
bottom: 0px;
margin: auto;
height: 100px;
      3.子绝父相 
position:absolute;
top:50%;
transform:translateY(-50%);
      4.display:flex 
display: flex;
//align-items属性定义项目在交叉轴上如何对齐。
align-items: center;

******水平垂直居中******
       1.子绝父相
情况1：
position:absolute;
top:50%;
left:50%
transform:translate(-50%,-50%); 
 情况2： 
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
        2.父元素设置display:flex 
display: flex;
//align-items属性定义项目在主轴上如何对齐。
justify-content: center;
//align-items属性定义项目在交叉轴上如何对齐。
align-items: center;