一行、多行文本垂直居中的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