在上次的直播课程中，若愚老师讲了两种垂直居中的方法,
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="box">
</div>
</div>
<div class="box2">
</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比较好。
网友评论