一个垂直水平居中效果

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

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

东西很简单,支持IE,FF,表砸我啊!

XML/HTML代码
  1. <!DOCTYPE?html?PUBLIC?”-//W3C//DTD?XHTML?1.0?Transitional//EN”?”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>??
  2. <html?xmlns=“http://www.w3.org/1999/xhtml”>??
  3. <head>??
  4. <meta?http-equiv=“Content-Type”?content=“text/html;?charset=utf-8”?/>??
  5. <title>垂直水平居中</title>??
  6. <style?type=“text/css”>??
  7. <!– ?
  8. .main{?position:absolute;?top:50%;?left:50%;?width:560px;?height:188px;??margin:-94px?0?0?-280px;?background:#CC9900} ?
  9. –>??
  10. </style>??
  11. </head>??
  12. ??
  13. <body>??
  14. <div?class=“main”>这是垂直水平居中div</div>??
  15. </body>??
  16. </html>??

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

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

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

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 一个垂直水平居中效果

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    这方法很好!

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

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

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏