CSS布局4-居中布局解决方案

inline-block + text-align
  子元素：inline-lock
  父元素：text-align:center;

  子元素：display：table
  margin：0 auto;

 父元素：position:relative

 子元素：position:absolute
 left:50%;
 transform:translateX(-50%);

  父元素：display:flex;  justify-content:center;

  父元素：display:flex;
  子元素：margin：0 auto;

  父元素：display:table-cell;
  vertical-clign:middle;

  父元素：position:relative;

  子元素:position:absolue;
   top:50%;
    transform:translateY(-50%);

  父元素：display:flex;
  align-items:center;

先水平居中:
  子元素：inline-lock
  父元素：text-align:center

再垂直居中：
  父元素：display:table-cell;
  vartical-align:middle;

  父元素：position:relative;

  子元素：position:absolute;
   left:50%;
   top:50%;
   transform:translate(-50%,-50%);

  父元素：display:flex;
   justify-content:cennter;
   align-items:center;