<style>
    .box{background:gray;width:500px;height:500px;border:1px solid #000;text-align:center;}
   .empty{height:100%;width:0;vertical-align:middle;display:inline-block;}
   .red{background:red;width:50px;height:50px;vertical-align:middle;display:inline-block;}
   .blue{background:blue;width:80px;height:80px;vertical-align:middle;display:inline-block;}
</style>

<div class="box">
   <div class="empty"></div>
   <div class="red"></div>
   <div class="blue"></div>
  </div>

重点：加一个兄弟空标签，把它的高度设为100%，宽度设置为0，再给它一个vertical-align:middle样式，

      要居中的元素也加vertical-align:middle;还有把元素显示方式display:inline-block

补充刚知道的一种垂直居中方法