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

站在用戶的角度思考問題，與客戶深入溝通，找到富陽網(wǎng)站設(shè)計與富陽網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋富陽地區(qū)。

css的三種引入方式

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

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

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)生自動換行，這樣就達不到垂直居中效果了。

　　
　　
　　
　　　　body { font-size:12px;font-family:tahoma;}
　　div {
　　　　height:25px;
　　　　line-height:25px;
　　　　border:1px solid #FF0099;
　　　　background-color:#FFCCFF;
　　}
　　


　　
現(xiàn)在我們要使這段文字垂直居中顯示！

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

如果一段內(nèi)容，它的高度是可變的那么我們就可以使用上一節(jié)講到的實現(xiàn)水平居中時使用到的最后一種方法，就是設(shè)定Padding，使上下的padding值相同即可。同樣的，這也是一種“看起來”的垂直居中方式，它只不過是使文字把

div {  
padding:25px;  
}

　　
　　
　　
　　　　body { font-size:12px;font-family:tahoma;}
　　　　div {
　　　　padding:25px;
　　　　border:1px solid #FF0099;
　　　　background-color:#FFCCFF;
　　　　width:760px;
　　}
　　


　　

　　　　
現(xiàn)在我們要使這段文字垂直居中顯示！