溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css怎么設(shè)置div垂直居中

發(fā)布時間：2021-04-29 13:43:49 來源：億速云 閱讀：187 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了css怎么設(shè)置div垂直居中，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

css的三種引入方式

1.行內(nèi)樣式，最直接最簡單的一種，直接對HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

css設(shè)置div垂直居中的方法：1、設(shè)置它的實際高度height和所在行的高度【line-height】相等；2、設(shè)定Padding，使上下的padding值相同即可。

本教程操作環(huán)境：windows7系統(tǒng)、css3版，DELL G3電腦。

css設(shè)置div垂直居中的方法：

一、單行垂直居中

　　如果一個容器中只有一行文字，對它實現(xiàn)居中相對比較簡單，我們只需要設(shè)置它的實際高度height和所在行的高度line-height相等即可。

如：

div {  
height:25px;  
line-height:25px;  
overflow:hidden;  
}

　　這段代碼很簡，后面使用overflow:hidden的設(shè)置是為了防止內(nèi)容超出容器或者產(chǎn)生自動換行，這樣就達(dá)不到垂直居中效果了。

<!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> 單行文字實現(xiàn)垂直居中 </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>現(xiàn)在我們要使這段文字垂直居中顯示！</div>
</body>
</html>

二、多行未知高度文字的垂直居中

　　如果一段內(nèi)容，它的高度是可變的那么我們就可以使用上一節(jié)講到的實現(xiàn)水平居中時使用到的最后一種方法，就是設(shè)定Padding，使上下的padding值相同即可。同樣的，這也是一種“看起來”的垂直居中方式，它只不過是使文字把<div>完全填充的一種訪求而已?？梢允褂妙愃葡旅娴拇a：

div {  
padding:25px;  
}

　　這種方法的優(yōu)點就是它可以在任何瀏覽器上運(yùn)行，并且代碼很簡單，只不過這種方法應(yīng)用的前提就是容器的高度必須是可伸縮的。

<!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> 多行文字實現(xiàn)垂直居中 </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>現(xiàn)在我們要使這段文字垂直居中顯示！
　　　　</pre><br>　　</div>
</body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css怎么設(shè)置div垂直居中”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手