与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。
代码：内部标签的vertical-align:middle可以省略
<style>
div{
display: table-cell;
200px;
height: 300px;
border: 1px solid #000000;
color: red;
font-size: 16px;
vertical-align: middle;
padding: 0 10px;
}
span{
display:inline-block;
/*vertical-align: middle;*/（可要可不要）
}
</style>
</head>
<body>
<div>
<span>实现的关键是把文字当图片处理。用一个标签将所有的文字封装起来
设置文字与图片相同的display属性值，然后用处理图片垂直居中的方式
处理文字的垂直居中即可</span>
</div>
</body>