使用DIV设计模仿Windows的弹出对话框，经常需要使DIV中的内容水平、垂直居中。DIV水平居中的方法很简单，直接使用如下代码即可：
div居中 在线演示
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条 】
如果觉得《css的div垂直居中的方法 CSS使DIV内容垂直居中的方法》对你有帮助，请点赞、收藏，并留下你的观点哦！
