css如何设置div垂直居中(百分比div垂直居中)
生活随笔
收集整理的這篇文章主要介紹了
css如何设置div垂直居中(百分比div垂直居中)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本教程操作環境：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值相同即可。同樣的，這也是一種“看起來”的垂直居中方式，它只不過是使文字把<div>完全填充的一種訪求而已?？梢允褂妙愃葡旅娴拇a：
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>現在我們要使這段文字垂直居中顯示！
</pre><br> </div>
</body>
</html>
登錄后復制
以上就是css如何設置div垂直居中的詳細內容，更多請關注風君子博客其它相關文章！
總結
以上是生活随笔為你收集整理的css如何设置div垂直居中(百分比div垂直居中)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： aws mysql价格_mysql –
- 下一篇： mysql ddl什么意思(Mysql主