css設定div垂直居中的方法：1、設定它的實際高度height和所在行的高度【line-height】相等；2、設定Padding，使上下的padding值相同即可。
本教學操作環境：windows7系統、css3版，DELL G3電腦。
css設定div垂直居中的方法：
一、單行垂直居中
如果一個容器中只有一行文字，對它實作居中相對比較簡單，我們只需要設定它的實際高度height和所在行的高度line-height相等即可。
如：
div {
height:25px;
line-height:25px;
overflow:hidden;
}這段程式碼很簡，後面使用overflow:hidden的設定是為了防止內容超出容器或產生自動換行，這樣就達不到垂直居中效果了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 单行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>二、多行未知高度文字的垂直居中
# 如果一段內容，它的高度是可變的那麼我們就可以使用上一節講到的實作水平居中時所使用到的最後一種方法，就是設定Padding，讓上下的padding值相同即可。同樣的，這也是一種「看起來」的垂直居中方式，它只不過是使文字把dc6dce4a544fdca2df29d5ac0ea9906b完全填充的一種訪問而已。可以使用類似下面的程式碼：
div {
padding:25px;
}這種方法的優點就是它可以在任何瀏覽器上運行，而且程式碼很簡單，只不過這種方法應用的前提就是容器的高度必須是可伸縮的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><br> <pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！