设置垂直居中通常有两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
父元素高度确定的单行文本设置垂直居中
通过设置父元素的height 和 line-height 的值一致来实现。
HTML代码
<body>
<div>
<span>今天星期四</span>
</div>
</body>
CSS代码
<style type="text/css">
div {
height: 100px;
line-height: 100px;
}
</style>
父元素高度确定的多行文本设置垂直居中方法一
插入table(包括tbody，tr，td标签)，同时设置vertical-align: middle;
HTML代码
<body>
<table>
<tbody>
<tr>
<td>
<div>
<p>第一行</p>
<p>第二行</p>
</div>
</td>
</tr>
</tbody>
</table>
</body>
CSS代码
<style type="text/css">
table td {
height: 100px;
background-color: #666;
vertical-align: middle; /*td标签默认设置了该属性，这里实际可以不用显式的设置*/
}
</style>
父元素高度确定的多行文本设置垂直居中方法二
可以设置块状元素的display为table-cell，激活vertical-align属性。
HTML代码
<body>
<div id="container">
<div>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
</div>
</div>
</body>
CSS代码
<style type="text/css">
#container {
height: 300px;
background-color: #666;
display: table-cell; /*IE8及Chrome，Firefox支持*/
vertical-align: middle; /*IE8及Chrome，Firefox支持*/
}
</style>