一个垂直水平居中效果

2009-03-26 分类：HTML+CSS 阅读(9639) 评论(2)

今天做自定义的404页面，需要垂直水平居中，垂直居中不像水平居中那么简单，呵呵。

这种效果会在企业站首页，或一些提示性页面经常用到，今天做了个简单的demo，共享给大家。

东西很简单，支持IE，FF，表砸我啊！

XML/HTML代码

<!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>??
<meta?http-equiv=“Content-Type”?content=“text/html;?charset=utf-8”?/>??
<title>垂直水平居中</title>??
<style?type=“text/css”>??
<!– ?
.main{?position:absolute;?top:50%;?left:50%;?width:560px;?height:188px;??margin:-94px?0?0?-280px;?background:#CC9900} ?
–>??
</style>??
</head>??
??
<body>??
<div?class=“main”>这是垂直水平居中div</div>??
</body>??
</html>??

这里对margin:-94px 0 0 -280px;做个解释：

margin-top:-94px，这个值是高度的1/2在稍微缩小一点;margin-left:-280px自然就是宽度的1/2

注意前面加个负号“-”。

赞(0) 打赏

未经允许不得转载：WEB前端开发 » 一个垂直水平居中效果

相关推荐

评论 2

#-49
这方法很好！

liaolan8年前 (2010-12-23)回复

前端开发相关广告投放更专业更精准