写在前面的话
最近在Stack Overflow上看到 一个不错的回答 ，以下是我对其的总结，分享给大家。
垂直居中的四种方法
①基础的方法
设置父元素的line-height等于height，这种方法只适用于对一行文字进行垂直居中对齐
<div style="width: 300px; height: 300px; line-height: 300px; background: #FF6600; margin: 50px auto;">
<p> 设置父元素line-height = height </p>
</div>
②使用vertical-align：middle
这是另一种垂直居中对齐的方法，适用于单行文本和多行文本，但它仍然需要一个高度固定的父元素盒子。
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
下面是样式表
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
background: #bbbbbb;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
③模拟table display
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
下面是样式表
div {
display: table;
width: 250px;
height: 100px;
text-align: center;
}
span {
display: table-cell;
vertical-align: middle;
}
这是另外一种垂直居中对齐的方法，但是它可能不能在老的浏览器中实现（IE7以下）
④使用绝对定位
这种方法使用绝对定位，并设置top、bottom、left、right都为0，在Smashing Magazine的文章中描述了更多的细节。
<div class="outer">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
下面是样式表
div.outer{
position: relative;
width: 500px;
height: 500px;
background: #bbbbbb;
}
div.inner {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top:; left:; bottom:; right:;
background: #FF6600;
}
效果图
结尾
如果有更多垂直居中的方法，希望能交流学习以下，在此感谢。