移动端自适应高度下文字如何居中

<style type="text/css">
html,body{height:100%;}
.text{width:100%;height:30%;background:#ccc;text-align:center;position:absolute;}
.text:before{content:'';display:inline-block;height:100%;vertical-align:middle;}
</style>

<div class="text">我要居中我要居中</div>