css实现水平垂直居中

弹性布局

.parent{
  diplay:flex;
  justify-content: center;  
  align-items:center;
}

绝对定位

.child{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

利用transform属性 + 绝对定位

.child{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%); 
}

使用table表格法

 .parent{
     display:table;
     width:300px;
     height:300px;
 }
 .child{
     display:table-cell;
     vertical-align:middle;
     text-align:center;
 }

也可以使用绝对定位+margin负值偏移