常用的元素居中的方法（css3）

水平居中

块级元素： margin： 0 auto；
行内元素： text-align: center;
通用：flex布局
justify-content: center;

垂直居中

行内元素：

• 父级设置与父级高度相同的行高（line-height）
• vertical-align: middle;

块级元素 :
flex布局: align-items: center;

水平，垂直居中

• flex 布局

父元素：

     display: flex;
     justify-content: center;
     align-items: center;

• position实现

父元素：

     position: relative；

子元素：

      position: absolute;
      top: 50%;  
      left: 50%; 
      margin-left:  width/2; 
      margin-top: height/2;

      position: absolute;
      top: 0;  
      left: 0; 
      right: 0;
      bottom: 0;
      margin: auto;

      position: absolute;
      top: 50%;  
      left: 50%; 
      transform: translate(-50%, -50%);