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>