利用：before垂直居中的问题

在上次的直播课程中，若愚老师讲了两种垂直居中的方法,
html代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrap">
     <div class="box">
      ![](http://js.jirengu.com/images/dave.min.svg)   
    
  </div>
   
</div>
  
    <div class="box2">
      ![](http://js.jirengu.com/images/dave.min.svg)
    </div>
  

</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;
}

垂直居中

为方便调试，在贴一个JSbin的地址：
垂直居中

重点讨论伪类：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的，但是用在文字上就出现了问题，本来我想要的效果是这样：

想要的效果

结果确是这样：

现实效果

通过这个列子可以得知，这个方法用在图片（单行）或者单行文字是OK的，多行文字的垂直居中还是适用table-cell比较好。

利用：before垂直居中的问题

重点讨论伪类：before使用场景

推荐阅读更多精彩内容