1、div中单行文字的垂直居中
在div中单行的文字需要垂直居中时，只需要对所在的div添加行高line-height等于div的高度，并添加overflow:hidden防止因为防止内容超出容器或者产生自动换行，从而使垂直居中失效
<style type="text/css">
div {
height:100px;
line-height:100px;
overflow:hidden;
}
</style>
2、多行未知高度文字的垂直居中
如果div的高度是可变的那么我们就可以设置一个padding值，试使div的上下padding值相等即可，这样就可以使文字看起来像是被垂直居中了一样。
<style type="text/css">
div {
padding：30px;
{
</style>
3、多行文本固定高度的居中
CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了(vertical-align的值是middle，而水平居中align的值是center)。注意，display:table和 display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素。（该方法在Internet Explorer 6及以下的版本中是无效的）
<style type="text/css">
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid red;
background-color: yellow;
width:760px;
{
</style>
4、知道div的高度
要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。
<style type="text/css">
.div{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px
}
</style>
