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

来源：互联网发布：yum 搜索rpm 编辑：程序博客网时间：2024/06/08 18:29

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

#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">

<head>

#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">

<head>

#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">

<head>

#MrJin {

width:500px;

padding:50px 0;

border:1px solid #03c;

text-align:center;

}

</style>

</head>

<body>

<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">

<head>

#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>

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">

<head>

#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>

<p>CSS Web Design 我爱CSS - 52CSS.com</p>

<p>我爱CSS致力于Web标准在中国的应用及发展</p>

<p>我们努力保持每天更新，为您提供最新最全的CSS网页布局教程。</p>

</a>

</div>

</body>

</html>