div垂直居中的方法

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>


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市圈驼,隨后出現的幾起案子人芽,更是在濱河造成了極大的恐慌,老刑警劉巖绩脆,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件啼肩,死亡現場離奇詭異,居然都是意外死亡衙伶,警方通過查閱死者的電腦和手機祈坠,發(fā)現死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來矢劲,“玉大人赦拘,你說我怎么就攤上這事》页粒” “怎么了躺同?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長丸逸。 經常有香客問我蹋艺,道長,這世上最難降的妖魔是什么黄刚? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任捎谨,我火速辦了婚禮,結果婚禮上憔维,老公的妹妹穿的比我還像新娘涛救。我一直安慰自己,他們只是感情好业扒,可當我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布检吆。 她就那樣靜靜地躺著,像睡著了一般程储。 火紅的嫁衣襯著肌膚如雪蹭沛。 梳的紋絲不亂的頭發(fā)上臂寝,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天,我揣著相機與錄音摊灭,去河邊找鬼交煞。 笑死,一個胖子當著我的面吹牛斟或,可吹牛的內容都是我干的。 我是一名探鬼主播集嵌,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼萝挤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了根欧?” 一聲冷哼從身側響起怜珍,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎凤粗,沒想到半個月后酥泛,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡嫌拣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年柔袁,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片异逐。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡捶索,死狀恐怖,靈堂內的尸體忽然破棺而出灰瞻,到底是詐尸還是另有隱情腥例,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布酝润,位于F島的核電站燎竖,受9級特大地震影響,放射性物質發(fā)生泄漏要销。R本人自食惡果不足惜构回,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望疏咐。 院中可真熱鬧捐凭,春花似錦、人聲如沸凳鬓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽缩举。三九已至垦梆,卻和暖如春匹颤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背托猩。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工印蓖, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人京腥。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓赦肃,卻偏偏與公主長得像,于是被迫代替她去往敵國和親公浪。 傳聞我的和親對象是個殘疾皇子他宛,可洞房花燭夜當晚...
    茶點故事閱讀 43,612評論 2 350

推薦閱讀更多精彩內容