垂直居中

<div class="wrapper">
    <div class="cell"></div>
</div>
.wrapper{
  dispaly:table
}
.cell{
  display:tabale-cell
  vertical-align:middle
}

<div class="content"></div>
.content{
  position :absolute;
  top:50%;
  height:240px;
  margin-top:-120px
}

<div class="float">
  <div class="content"></div>
</div>
.float{
  float:left;
  height:50%;
  margin-bottom: -120px;
}
.content{
  clear:both;
  height:240px;
  position:relative;
}

<div class="content"></div>
.content{
  position: absolute;   --> 父元素为 position：relative
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  margin: auto;
  height: .1rem;
  width: .5rem;
  line-height: .1rem;
}

else
parentElement{ 
  position:relative;
} 
childElement{
 position: absolute; top: 50%; transform: translateY(-50%); 
}

span{
    display: inline-block;
}
img{
   vertical-align: middle;
   padding-bottom: .015rem;
}