本文向大家描述一下如何實現(xiàn)要實現(xiàn)CSS單行內(nèi)容居中，只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設置line-height和height，并使兩值相等，再加上over-flow:hidden就可以了。

CSS實現(xiàn)完美垂直居中

要實現(xiàn)CSS單行內(nèi)容居中，多數(shù)是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實現(xiàn)的方法也不少，不一定要拘泥于和table布局一樣。不過最近有人問了幾個例子，看來對此的需求還不少。

首先，要有一個概念：凡是table布局可以實現(xiàn)的，CSS一定可以實現(xiàn)。CSS可以實現(xiàn)的，table未必能做到。

CSS單行內(nèi)容居中

只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設置line-height和height，并使兩值相等，再加上over-flow:hidden就可以了。

viewplaincopytoclipboardprint? 

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

 CSS單行內(nèi)容居中優(yōu)點：

1.同時支持塊級和內(nèi)聯(lián)極元素

2.支持所有瀏覽器

CSS單行內(nèi)容居中缺點：

1.只能顯示一行

2.IE中不支持等的居中

要注意的是：1.使用相對高度定義你的height和line-height2.不想毀了你的布局的話，overflow:hidden一定要。

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

viewplaincopytoclipboardprint?

<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> 
<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，并且隱藏了溢出。如果你的瀏覽器支持放大字體，那么盡情地放大字體，看看會出現(xiàn)什么效果。

【編輯推薦】

1. 調(diào)用CSS屬性制作超炫菜單
2. 技術(shù)分享 如何實現(xiàn)CSS橫向?qū)Ш?/a>
3. link與@import在外部引用CSS中的區(qū)別
4. 解讀五大CSS3新技術(shù)用法
5. DIV CSS表單布局五個小技巧使用秘笈