CSS實現文本垂直居中的三種情況

作者：admin 2010-08-24 14:47:48

本文向大家介紹一下如何使用CSS實現一行或多行文本垂直居中，在單元格中，默認就是垂直居中的，而進行CSS網頁布局，這樣的形式改變了，文字默認是居于容器頂部。

你對CSS中文本垂直居中問題是否了解，這里和大家分享一下CSS實現一行或多行文本垂直居中的方法，主要從三個方面向大家介紹。

CSS實現一行或多行文本垂直居中

　　在表格布局時代，不需要過多的考慮垂直居中的問題，在單元格中，默認就是垂直居中的，一行文字是垂直居中，三行文字同樣也會垂直居中。進行CSS網頁布局，這樣的形式改變了。文字默認是居于容器頂部。

　　如下所示：

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<title>div-css.net</title> 
<styletypestyletype="text/css"> 
#MrJin{  
width:500px;  
height:200px;  
border:1pxsolid#03c;  
text-align:center;  
}  
</style> 
</head> 
<body> 
<dividdivid="MrJin">CSSWebDesign-div-css.net</div> 
</body> 
</html>

[可先修改部分代碼再運行查看效果]

　　在這樣的情況下，如何實現文字垂直居中呢。分為三種情況：

一、如果是單行文本，可以用行距來解決問題。

　　在div-css.net以前的文章中，也有過這方面的介紹。
　　如何在父元素中垂直居中文本？
　　我們為它增加行距的定義，得到了單行文本垂直居中的效果。

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<title>div-css.net</title> 
<styletypestyletype="text/css"> 
#MrJin{  
width:500px;  
height:200px;  
border:1pxsolid#03c;  
text-align:center;  
line-height:200px;  
}  
</style> 
</head> 
<body> 
<dividdivid="MrJin">CSSWebDesign-div-css.net</div> 
</body> 
</html>

[可先修改部分代碼再運行查看效果]

二、如果是多行文本，父容器不固定高度。

　　我們可以用padding來解決問題。

　　設置容器的padding上下為相同的固定值，容器的高度隨著內容的增加而增加。
　　以此來實現多行文本的垂直居中。

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<title>div-css.net</title> 
<styletypestyletype="text/css"> 
#MrJin{  
width:500px;  
padding:50px0;  
border:1pxsolid#03c;  
text-align:center;  
}  
</style> 
</head> 
<body> 
<dividdivid="MrJin"><p>CSSWebDesign-div-css.net</p> 
 
<p>致力于Web標準在中國的應用及發展</p></div> 
</body> 
</html>

[可先修改部分代碼再運行查看效果]　　#p#

三、如果是多行文本，父容器固定高度。

　　這就需要用到定位，而且需要給HTML增加標簽。我們不提倡這樣做。
　　但目前這個方法可以更好的解決問題。
　　在容器的內部需要增設兩個容器，來實現這樣的效果。
　　MrJin、MrJin_a和MrJin_b的設置分別如下：

ExampleSourceCode

#MrJin{  
position:static;  
*position:relative;  
height:300px;  
width:500px;  
border:1pxsolid#03c;  
*display:block!important;  
display:table!important;  
}  
#MrJin_a{  
position:static;  
*position:absolute;  
display:table-cell;  
vertical-align:middle;  
*display:block;  
top:50%;  
width:100%;  
}  
#MrJin_b{  
position:relative;  
top:-50%;  
text-align:center;  
width:100%;  
}

　　這樣設置以后，不管容器內的文本是一行，還是多行，都將會實現垂直居中對齊。

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<title>div-css.net</title> 
<styletypestyletype="text/css"> 
#MrJin{  
position:static;  
*position:relative;  
height:300px;  
width:500px;  
border:1pxsolid#03c;  
*display:block!important;  
display:table!important;  
}  
#MrJin_a{  
position:static;  
*position:absolute;  
display:table-cell;  
vertical-align:middle;  
*display:block;  
top:50%;  
width:100%;  
}  
#MrJin_b{  
position:relative;  
top:-50%;  
text-align:center;  
width:100%;  
}  
</style> 
</head> 
<body> 
<dividdivid="MrJin"> 
<dividdivid="MrJin_a"> 
<dividdivid="MrJin_b"> 
CSSWebDesign-div-css.net  
</div> 
</div> 
</div> 
</body> 
</html>

[可先修改部分代碼再運行查看效果]
　　
文章來源:Div-Css.net設計網參考:http://www.div-css.net/div_css/topic/index.asp?id=10091

【編輯推薦】

DIV+CSS解決文字與圖片居中問題
IE6.0對padding的解讀分析
揭露CSS中margins折疊現象內幕
七大CSS選擇符用法說明
技術分享如何使用CSS控制超鏈接文字樣式

責任編輯：佚名來源： div-css.net

CSS 居中