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>
