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

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

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

如今來幾個例子：

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

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

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

優(yōu)點：

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

缺點：

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

要注意的是：

1.使用絕對高度定義您的height和line-height
2.沒有念譽了您的布局的話，overflow:hidden必定要

為什么？
請比擬以下兩個例子：

<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> 

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

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

也很簡略，給出分歧的padding-bottom和padding-top便止

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

優(yōu)點：

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

缺點：

容器不能流動高度

三、把容器該作表格單元

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

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

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