（1）、垂直居中-父元素高度确定的单行文本
设置父元素的height和line-height高度一致
注：
height是指该元素的高度，line-height是指行间距。
line-height与font-size的计算值之差，在CSS成为行间距，分为两半，分别加到一个文本行内容的顶部和底部。
弊端：
当文字长度大于块的宽度时，就有内容脱离了块。
（自己想的）另外：
对于单行文本，要想设置合理的行间距和元素高度，需满足（（line-height ）-（font-size ））/2<=height-font-size
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
</style>
</head>
<body>
<!--下面是代码任务部分-->
<div class="wrap">
<h2>hi,imooc!</h2>
</div>
</body>
</html>
（2）、垂直居中-父元素高度确定的多行文本（方法一）
使用table（包括tbody,tr,td标签），同时设置vertical-align:middle
注：
td标签默认情况下就设置了vertical-align:middle属性，所以不需要显式的设置了。
CSS中有一个垂直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.wrap{height:300px;background:#ccc}
.wrap1{height:300px;background:#ccc;
}
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
<!--下面是代码任务区-->
<table>
<tbody>
<tr><td class="wrap1">
<div>
<img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
（3）、垂直居中-父元素高度确定的多行文本（方法二）
设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性。
注：
在chrome、firefox、IE8以上的浏览器可以用这种方法，但IE6\7不支持。兼容性差。
好处：
不用添加多余的无意义的标签
缺点：
兼容性不是很好；
而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
.container1{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
<!--下面是代码任务区-->
<div class="container1">
<img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>
