css垂直居中水平居中

垂直水平居中：

父元素定高，子元素不定高

.parent{
  
  width:400px;
  height:400px;  
    position:relative;    
}
.child{
    position: absolute;
     top: 50%;
　　　left:50%;

     transform: translate(-50%);
}

 

子元素定高：

.parent{
    width:400px;
    height:400px;
    display:table;   
}
.child{
    width:100px;
    height:100px;
    display:table-cell;
    vertical-align:middle;
}