本文摘自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
;
}
</
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
>
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"
><
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
>
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%
;
}
{
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/"
>
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
>
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
>