利用：before垂直居中的问题

在上次的直播课程中，若愚老师讲了两种垂直居中的方法,
html代码如下：
<!DOCTYPE html>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <div class="wrap">
     <div class="box">
      ![](http://js.jirengu.com/images/dave.min.svg)   
    <div class="box2">
      ![](http://js.jirengu.com/images/dave.min.svg)
</body>
</html>
CSS代码如下：
.wrap{
  display: table;
  width: 100%;
.box{
  height: 200px;
  border: 1px solid red;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
.box>img{
  width: 100px;
.box2>img{
  width: 180px;
  vertical-align: middle;
.box2{
  height: 300px;
  border: 1px solid blue;
  text-align: center;
.box2:before{
  content:'';
  display: inline-block;
  width: 0px;
  height: 100%;
  vertical-align: middle;
重点讨论伪类：before使用场景
在做实战15的时候想利用before来解决页头的垂直居中，但是使用起来发现没有达到想要的效果。仔细分析代码发现问题如下:
.box2:before{
  content:'';
  display: inline-block;
  width: 0px;
  height: 100%;
  vertical-align: middle;
在创建伪类后，使用了display：inline-block和heigh：100%这两行代码，这就意味着那个想要垂直居中的元素也需要display：inline-block，那么img本身就是inline-block，所以这个方法用在图片上是OK的，但是用在文字上就出现了问题，本来我想要的效果是这样：