CSS垂直方向上文本居中

比较好的垂直居中的处理方式，代码如下：

    <div class="box">        <span>The text is centered vertically</span>    </div>    <style>        .box{            display: table;            width: 400px;            height: 400px;            background: #ccc;        }        span{            display: table-cell;            vertical-align: middle;            text-align: center;        }    </style>

效果图如下：