设置一个元素在一个容器中水平垂直居中

设置一个元素在一个容器中水平垂直居中

设置一个元素在一个容器中水平垂直居中，必须更改默认的display属性值为inline-block;并加上同级元素（标尺）（同级元素[标尺]样式设置为vertical-align:middle;width:0;height:100%;display:inline-block;）
1 必须给容器（父元素）加上text-align:center;
2:必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;
3 在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block

<style>
       div{
           text-align: center;
           width: 200px;
           height: 200px;
           background-color: #ccc;
       }
       div p{
           font-size: 12px;
           color: #fff;
           width: 150px;
           height: 30px;
           line-height: 30px;
           background-color: #999;
           display: inline-block;
           vertical-align: middle;
       }
       div span {
           vertical-align:middle;
           width:0;
           height:100%;
           display:inline-block
       }
 </style>
 
 <div class="box">
        <p>水平垂直居中测试</p>
        <span></span>
 </div>