布局解决方案——居中布局

HTML

<div class="parent"> 
    <div class="child">DEMO</div>
</div>

 

CSS

兼容性较好：

.parent{
  text-align:center;  
  display:table-cell;  
  vertical-align:middle;  
}
.child{
  display:inline-block;  
}

 

兼容性一般：

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

 

兼容性不好

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