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

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

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

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

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

只考慮單行是最簡(jiǎn)單的，無(wú)論是否給容器固定高度，只要給容器設(shè)置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)點(diǎn)：

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

2.支持所有瀏覽器

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

1.只能顯示一行

2.IE中不支持等的居中

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

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

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> 
 

 上一個(gè)高度是用的絕對(duì)單位px，并且沒(méi)有隱藏溢出，下一個(gè)高度用的單位是相對(duì)單位em，并且隱藏了溢出。如果你的瀏覽器支持放大字體，那么盡情地放大字體，看看會(huì)出現(xiàn)什么效果。

【編輯推薦】

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