一个垂直水平居中效果

时间：2009年03月26日作者：愚人码头查看次数:4,172 views评论次数：2

今天做自定义的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

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

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《一个垂直水平居中效果》

如果你读了我的文章，觉得有帮助： 说明
分类：html+css

您可能感兴趣的文章

1条评论
  1. liaolan留言于:2010年12月23日17:50

    这方法很好！

    [回复]

发表评论

*

*