HTML的div里写多行字,div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)...

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSSHack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生 效，例如表格元素中的

、、等，而像

、 这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

一、单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

如：

复制代码代码如下:

div{

height:25px;

line-height:25px;

overflow:hidden;

}

这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。更多CSS教

程。

复制代码代码如下:

-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

单行文字实现垂直居中

body{font-size:12px;font-family:tahoma;}

div{

height:25px;

line-height:25px;

border:1pxsolid#FF0099;

background-color:#FFCCFF;

}

现在我们要使这段文字垂直居中显示！