这篇文章主要介绍了css怎么设置div垂直居中，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

站在用户的角度思考问题，与客户深入沟通，找到富阳网站设计与富阳网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站制作、网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟空间、企业邮箱。业务覆盖富阳地区。

css的三种引入方式

1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""。2.内嵌样式，就是将CSS代码写在之间，并且用

进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上

css设置div垂直居中的方法：1、设置它的实际高度height和所在行的高度【line-height】相等；2、设定Padding，使上下的padding值相同即可。

本教程操作环境：windows7系统、css3版，DELL G3电脑。

css设置div垂直居中的方法：

一、单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度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;
　　}
　　


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

二、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把

div {  
padding:25px;  
}

　　
　　
　　
　　　　body { font-size:12px;font-family:tahoma;}
　　　　div {
　　　　padding:25px;
　　　　border:1px solid #FF0099;
　　　　background-color:#FFCCFF;
　　　　width:760px;
　　}
　　


　　

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