DIV CSS 佈局教程網

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

如何用CSS實現DIV內容居中

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

如今來幾個例子：

一、雙行DIV內容居中

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

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

優點：

1.同時支持塊級和內聯極元素
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，並且暗藏了溢出。假如您的浏覽器支持擱大字體,新網科技，那麼縱情天擱大字體，瞅望會呈現什麼後果。