css3 父盒子里的子盒子水平垂直居中

<div class="box">
    <div class="box1">
    </div><span></span>
</div>


<style>
.box{
    textalign:center;
    width:300px;
    height:400px;
    }
.box1{
    display:inline-block;
    verticla-align:middle;
    width:100px;
    height:150px;
}
span{
    height:100%;
    display:inline-block;
    vertical-align:middle
}

</style>

简单地很