一行、多行文本垂直居中的CSS实例说明

本文摘自52CSS.COM
    在表格布局时代，不需要过多的考虑垂直居中的问题，在单元格中，默认就是垂直居中的，一行文字是垂直居中，三行文字同样也会垂直居中。进行CSS网页布局，这样的形式改变了。文字默认是居于容器顶部。
    如下所示：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 52css.com </ title >
< style  type ="text/css" >
#MrJin  { } {
    width : 500px ;
    height : 200px ;
    border : 1px solid #03c ;
    text-align : center ;
}
</ style >
</ head >
< body >
< div  id ="MrJin" >< a  href ="http://www.52css.com/" > CSS Web Design 我爱CSS - 52CSS.com </ a ></ div >
</ body >
</ html >

    在这样的情况下，如何实现文字垂直居中呢。分为三种情况：

一、如果是单行文本，可以用行距来解决问题。
    我们为它增加行距的定义，得到了单行文本垂直居中的效果。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 52css.com </ title >
< style  type ="text/css" >
#MrJin  { } {
    width : 500px ;
    height : 200px ;
    border : 1px solid #03c ;
    text-align : center ;
    line-height : 200px ;
}
</ style >
</ head >
< body >
< div  id ="MrJin" >< a  href ="http://www.52css.com/" > CSS Web Design 我爱CSS - 52CSS.com </ a ></ div >
</ body >
</ html >

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

    我们可以用padding来解决问题。
    设置容器的padding上下为相同的固定值，容器的高度随着内容的增加而增加。
    以此来实现多行文本的垂直居中。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 52css.com </ title >
< style  type ="text/css" >
#MrJin  { } {
    width : 500px ;
    padding : 50px 0 ;
    border : 1px solid #03c ;
    text-align : center ;
}
</ style >
</ head >
< body >
< div  id ="MrJin" >< p >< a  href ="http://www.52css.com/" > CSS Web Design 我爱CSS - 52CSS.com </ p >< p > 我爱CSS致力于Web标准在中国的应用及发展 </ a ></ p ></ div >
</ body >
</ html >

或者：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 52css.com </ title >
< style  type ="text/css" >
#MrJin  { } {
    width : 500px ;
    padding : 50px 0 ;
    border : 1px solid #03c ;
    text-align : center ;
}
</ style >
</ head >
< body >
< div  id ="MrJin" >< a  href ="http://www.52css.com/" >
< p > CSS Web Design 我爱CSS - 52CSS.com </ p >
< p > 我爱CSS致力于Web标准在中国的应用及发展 </ p >
< p > 我们努力保持每天更新，为您提供最新最全的CSS网页布局教程。 </ p >
</ a ></ div >
</ body >
</ html >

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

    这就需要用到定位，而且需要给HTML增加标签。我们不提倡这样做。
    但目前这个方法可以更好的解决问题。
    在容器的内部需要增设两个容器，来实现这样的效果。
    MrJin、MrJin_a和MrJin_b的设置分别如下：

#MrJin  { } {     
    position : static ;
    *position : relative ;     
    height : 300px ;
    width : 500px ;
    border : 1px solid #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% ;
}

这样设置以后，不管容器内的文本是一行，还是多行，都将会实现垂直居中对齐。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 52css.com </ title >
< style  type ="text/css" >
#MrJin  { } {     
    position : static ;
    *position : relative ;     
    height : 300px ;
    width : 500px ;
    border : 1px solid #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 >
< div  id ="MrJin" >
< div  id ="MrJin_a" >
< div  id ="MrJin_b" >
< a  href ="http://www.52css.com/" >
CSS Web Design 我爱CSS - 52CSS.com
</ a >
</ div >
</ div >
</ div >
</ body >
</ html >

或者：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 52css.com </ title >
< style  type ="text/css" >
#MrJin  { } {     
    position : static ;
    *position : relative ;     
    height : 300px ;
    width : 500px ;
    border : 1px solid #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 >
< div  id ="MrJin" >
< div  id ="MrJin_a" >
< div  id ="MrJin_b" >
< a  href ="http://www.52css.com/" >
< p > CSS Web Design 我爱CSS - 52CSS.com </ p >
< p > 我爱CSS致力于Web标准在中国的应用及发展 </ p >
< p > 我们努力保持每天更新，为您提供最新最全的CSS网页布局教程。 </ p >
</ a >
</ div >
</ div >
</ div >
</ body >
</ html >