.greenbox{
width:30px;
height:100%;
background:#0c0;
display:inline-block;
vertical-align:middle;
}但是我们总不能每次要垂直居中，都要添加一个奇怪的div在里头吧！所以我们就要把脑筋动到“伪元素”身上，利用::before和::after添加div进到杠杠内，让这个“伪”div的高度100%，就可以轻松地让其他的div都居中。不过不过不过！div记得要把display设为inline-block，毕竟vertical-align:middle；是针对行内元素，div本身是block，所以必须要做更改！
.div0::before{
content:'';
width:0;
height:100%;
display:inline-block;
position:relative;
vertical-align:middle;
background:#f00;
}calc动态计算
看到这边或许会有疑问，如果今天我的div必须要是block，我该怎么让它垂直居中呢？这时候就必须用到CSS特有的calc动态计算的能力，我们只要让要居中的div的top属性，与上方的距离是“50%的外框高度+ 50%的div高度”，就可以做到垂直居中，至于为什么不用margin-top，因为margin相对的是水平宽度，必须要用top才会正确。
.div0{
width:200px;
height:150px;
border:1px solid #000;
}
.redbox{
width:30px;
height:30px;
background:#c00;
float:left;
top:calc(50% - 15px);
margin-left:calc(50% - 45px);
}
.greenbox{
width:30px;
height:80px;
background:#0c0;
float:left;
top:calc(50% - 40px);
}
.bluebox{
width:30px;
height:40px;
background:#00f;
float:left;
top:calc(50% - 20px);
}使用表格或假装表格
或许有些人会发现，在表格这个HTML里面常用的DOM里头，要实现垂直居中是相当容易的，只需要下一行vertical-align:middle就可以，为什么呢？最主要的原因就在于table的display是table，而td的display是table-cell，所以我们除了直接使用表格之外，也可以将要垂直居中元素的父元素的display改为table-cell，就可以轻松达成，不过修改display有时候也会造成其他样式属性的连动影响，需要比较小心使用。
HTML：
<table>
<tr>
<td>
<div>表格垂直居中</div>
</td>
</tr>
</table>
<div class="like-table">
<div>假的表格垂直居中</div>
</div>
