<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
div中的内容垂直居中实例
</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
div.demo{width: 240px;margin: 12px auto;border: 1px solid #1987df;color:
inherit;background: #CEE7FF} div#outerbox{height: 70px;position: relative;display:table}
div#outerbox div{position: absolute;top: 50%;left: 0} div#outerbox p{position:
relative;top: -50%;margin: 4px;text-indent: 0; font-size:14px;} div#outerbox>div{display:table-cell;vertical-align:middle;position:static}
</style>
</head>
<body>
<div class="demo" id="outerbox">
<div>
<p>
对于div中文字可以使其垂直居中,我要兼容IE和firefox!
</p>
</div>
</div>
</body>
</html>本文出自 “IT精英的集中区” 博客，请务必保留此出处http://msuccess.blog.51cto.com/5486886/1616588
原文地址：http://msuccess.blog.51cto.com/5486886/1616588
