多行文本水平垂直居中

话不多说。直接上代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多行文本居中</title>
<style>
*{margin:0; padding:0;}
.box{width:300px; height:300px; border:#666 solid 1px; font-size:0; margin:100px auto;}
.box span{display:inline-block; height:100%; width:0;background:red; vertical-align:middle;}
.text{vertical-align:middle; display:inline-block;word-break:break-all; font-size:14px; *display:inline; zoom:1;}
</style>
</head>
 
<body>
<div class="box">
        <span></span>
    <p class="text">蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。蚂蚁部落。</p>
</div>
</body>
</html>