你對(duì)DIV內(nèi)容居中的方法是否了解，本文向大家描述一下用CSS實(shí)現(xiàn)DIV內(nèi)容居中的幾種方法，首先，要有一個(gè)概思：但凡table布局可以實(shí)隱的，CSS一訂可以真隱。CSS可以完成的，table已必能做到。

如何用CSS實(shí)現(xiàn)DIV內(nèi)容居中

在CSS網(wǎng)頁(yè)布局中，會(huì)屢次使用DIV層節(jié)制內(nèi)容布局，良多時(shí)分人們請(qǐng)求DIV層中內(nèi)容居中顯示，并且少數(shù)是正在有高度的情形下，或許DIV高度不訂的情形下才用，而且完成的方式也沒(méi)有少，不必定要拘泥于和table布局一樣。
首先，要有一個(gè)概思：但凡table布局可以實(shí)隱的，CSS一訂可以真隱。CSS可以完成的，table已必能做到。

如今來(lái)幾個(gè)例子：

一、雙行DIV內(nèi)容居中

只斟酌雙止是最簡(jiǎn)略的，不管能否給容器流動(dòng)高度，只需給容器設(shè)放line-height和height，并使兩值相等，再加上over-flow:hidden便能夠了

.middle-demo-1{  
height:4em;  
line-height:4em;  
overflow:hidden;  
} 

優(yōu)點(diǎn)：

1.同時(shí)支持塊級(jí)和內(nèi)聯(lián)極元素
2.支持一切瀏覽器

缺點(diǎn)：

1.只能顯示一行
2.IE中不支持等的居中

要注意的是：

1.使用絕對(duì)高度定義您的height和line-height
2.沒(méi)有念譽(yù)了您的布局的話，overflow:hidden必定要

為什么？
請(qǐng)比擬以下兩個(gè)例子：

<pstylepstyle="background:#900;color:#00f;font:bold12px/24pxHelvertica,Arial,sans-serif;height:24px;width:370px;"> 
 
Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
<br/> 
<br/> 
<pstylepstyle="background:#090;color:#00f;font:bold12px/2emHelvertica,Arial,sans-serif;height:2em;width:370px;overflow:hidden;"> 
 
Loremipsumdolorsitamet,consectetueradipiscingelit.p> 

上一個(gè)高度是用的相對(duì)單位px，并且出有隱蔽溢出，下一個(gè)高度用的雙位是絕對(duì)單位em，并且暗藏了溢出。假如您的瀏覽器支持?jǐn)R大字體,新網(wǎng)科技，那么縱情天擱大字體，瞅望會(huì)呈現(xiàn)什么后果。#p#

二、少止DIV內(nèi)容居中，且容器高度可變

也很簡(jiǎn)略，給出分歧的padding-bottom和padding-top便止

.middle-demo-2{  
padding-top:24px;  
padding-bottom:24px;  
} 

優(yōu)點(diǎn)：

1.同時(shí)支撐塊級(jí)和內(nèi)聯(lián)極元葷
2.支持非白原內(nèi)容
3.支撐一切閱讀器

缺點(diǎn)：

容器不能流動(dòng)高度

三、把容器該作表格單元

CSS降求一系列diplay屬性值，包含display:table,display:table-row,display:table-cell等，能把元素該做表格單元來(lái)顯示。這是再加上vertical-align:middle,就和表格中的valign="center"一樣了。

.middle-demo-3{  
display:table-cell;  
height:300px;  
vertical-align:middle;  
} 

惋惜IE不支持那些屬性，不外在其他涉獵器上顯示后果十分完善。
要注意的是：和一個(gè)正當(dāng)?shù)?   元葷必需正在