行高与多行文字垂直居中

HTML

<div class="box">
    <div class="content">基于行高实现的多行文字垂直居中效果，需要vertical-align属性帮助。</div>
</div>
					    

CSS

.box {
    width: 280px;
    line-height: 220px;
    background-color: #f0f3f9;
    margin: auto;
}
.content {
    display: inline-block;
    line-height: 20px;
    margin: 0 20px;
    text-align: left;
    vertical-align: middle;
}
				    

JS

//no