[HTML&CSS] 未知高度多行文本垂直居中

<style type="text/css">
*{margin:0;padding:0;}
.box{background:pink;height:160px;width:250px;font-size:0;margin:30px auto;white-space:normal;word-wrap:break-word;}
.box:before{content:'';display:inline-block;vertical-align:middle;width:0;height:100%;}
.text{display:inline-block;font:12px/18px Verdana, Geneva, sans-serif;vertical-align:middle;}
</style>

<div class="box">
    <p class="text">多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝</p>
</div>