css的div垂直居中的方法,CSS使DIV内容垂直居中的方法

使用DIV设计模仿Windows的弹出对话框，经常需要使DIV中的内容水平、垂直居中。DIV水平居中的方法很简单，直接使用如下代码即可：

div居中 在线演示 www.divcss5.com

body{ text-align:center}

.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}

/* css注释：为了观察效果设置宽度 边框 高度等样式 */

DIVCSS5实例

谈到垂直居中，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSSHack技术就可以啊！但事实却不是这么简单，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的

、、等，而像

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

下面介绍几种使DIV内容chuizhi垂直居中的方法：

一、单行内容垂直居中

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

如：

div {

height:25px;

line-height:25px;

overflow:hidden;

}

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

单行文字实现垂直居中

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

div {

height:25px;

line-height:25px;

border:1px solid #FF0099;

background-color:#FFCCFF;

}

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

【发表评论0条 】