关于行内元素垂直居中的一个小小trick

在保持父元素具体数值宽度不变且有不止一行时，可以使用一点小tricks,比如

#outer{
text-align: center;
height: 200px;
width: 300px;
}
#outer::before{
content: " ";
height: 100%;
width: 1%;
display: inline-block;
vertical-align: middle;
}
/*html代码如下*/
<div id="outer">
    <span>span1</span>
    <span>span2</span>
</div>

但是，注意：因为vertical-align是指行内元素的基线相对于该元素所在行的基线的垂直对齐方式，所以该方法只对行内元素有效