border: 3px solid #555;
width: 300px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
span{
vertical-align: middle;
}
HTML代码：
<div>
<span>这是放在span中的文字，通过外层div设置display: table-cell以及vertical-align: middle实现垂直居中。</span>
</div>效果图：
当我们把span的vertical-align: middle去掉之后是这样的：
看到差别没？文字的行间距更小了。如果你在自己电脑上运行代码就会发现，这几行字是向中间靠了，而并没有像图片一样往上移。我也在想办法搞清楚这是怎么回事，如果你知道原因，也烦请告诉我。
方法二：弹性盒子法
CSS代码：
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}
HTML代码：
<div class="container">
<div class="inner">
我在容器中水平垂直居中
</div>
</div>效果图：
align-items控制垂直方向的居中，justify-content控制水平方向的居中。这是CSS3的新方法，浏览器支持情况如下：
