完美实现垂直水平居中的 DIV

这

个问题，估计很多网页设计员都会遇到过，如何在页面中建立出一个垂直水平居中的 DIV 呢？

我在 google 搜索了一下关键字“div 垂直居中” ,约有71,900项符合的查询。但并未能找到一个正确的，符合 XHTML和CSS规范的办法。自己就琢磨了一下，其实也不难，虽然DIV不支持未明确高度的垂直居中，但这个是可以变通的。

我们知道 div 的 position 属性是支持百分比数值来进行定位的，有了这个定位能力，我们就可以把 div 的显示坐标定位在网页的绝对中心了，再通过 margin 属性把 div 设置为我们需要的宽度和高度就可以。当然我们的 margin-top 和 margin-left 属性需要使用到负数，把DIV的定位从中心分别向上和向左移动到合适的地方。下面这个例子可以在页面上建立一个垂直水平居中的 DIV:

<!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>垂直水平居中的 DIV</title> <style type="text/css">  </style> </head> <body> <div id="pageFrame">垂直水平居中的 DIV</div> </body> </html>

使用此方法，既不需要书写不标准的 css 代码，使用各浏览器的Hack，更不需要使用 JavaScript 来实现。

快速链接:http://oneoo.com/go/626086.html

随机文章:

整个 Yo2 上的相关文章:

最近阅读过此文章的网友:

6 Responses to “完美实现垂直水平居中的 DIV”

Feed for this Entry Trackback Address

1 Fancy
2008年04月05日 at 10:56 上午

哈哈，其实我一直是用这个方法来实现水平居中的，只不过垂直居中很少用到，这方法还是以前从老外那学的。
[ 引用 ]
2 人比望月迟
2008年04月05日 at 4:15 下午

向技术贴致敬！顺便问个问题，我的blog右侧评论里，为什么在有的评论者名字前有一个>符号？另外评论的书名号里必然也多出一个>符号，老大帮忙解决哦
[ 引用 ]
3 大猫
2008年04月05日 at 4:15 下午

虽然我还没用到,不过似乎很好玩,学习了,感谢
[ 引用 ]
4 MaoMen
2008年04月05日 at 5:02 下午

人比望月迟 on 2008年04月05日 at 4:15 下午 said:

向技术贴致敬！顺便问个问题，我的blog右侧评论里，为什么在有的评论者名字前有一个>符号？另外评论的书名号里必然也多出一个>符号，老大帮忙解决哦

你是不是自己改动了模板，看看有没有多于的“>”符号
[ 引用 ]
5 人比望月迟
2008年04月05日 at 6:33 下午

MaoMen on 2008年04月05日 at 5:02 下午 said:

人比望月迟 on 2008年04月05日 at 4:15 下午 said:

向技术贴致敬！顺便问个问题，我的blog右侧评论里，为什么在有的评论者名字前有一个>符号？另外评论的书名号里必然也多出一个>符号，老大帮忙解决哦

你是不是自己改动了模板，看看有没有多于的“>”符号

当然没有，就算我改了，难道后台模板可以改动侧边栏的评论吗？
看评论部分的源代码，和别的博客是完全一样的，比如在书名号里的链接都是用包起来的，但是我那页面上就是奇怪的显示出了>这个符号。
[ 引用 ]
6 人比望月迟
2008年04月05日 at 8:10 下午

问题已经解决了，谢谢
[ 引用 ]