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

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

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

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

[code]<!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">
<!--
#pageFrame {
position: absolute; // 设置为绝对定位
left: 50%; // 设置显示坐标 X
top: 50%; // 设置显示坐标 Y
width:760px; // 设置 DIV 宽度
height:460px; // 设置 DIV 高度
margin-left:-380px; // 根据 DIV 的宽度,设置此值
margin-top:-230px; // 根据 DIV 的宽度,设置此值
background:#EEE;
}
-->
</style>
</head>

<body>
<div id="pageFrame">垂直水平居中的 DIV</div>
</body>
</html>

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

  • http://bbs.yo2.cn Fancy

    哈哈,其实我一直是用这个方法来实现水平居中的,只不过垂直居中很少用到,这方法还是以前从老外那学的。

  • http://www.moncoon.com 人比望月迟

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

  • http://caitou.com 大猫

    虽然我还没用到,不过似乎很好玩,学习了,感谢

  • http://www.maomen.net MaoMen

    [Comment ID #273614 Will Be Quoted Here]你是不是自己改动了模板,看看有没有多于的“>”符号

  • http://www.moncoon.com 人比望月迟

    [Comment ID #273616 Will Be Quoted Here]

    当然没有,就算我改了,难道后台模板可以改动侧边栏的评论吗?
    看评论部分的源代码,和别的博客是完全一样的,比如在书名号里的链接都是用包起来的,但是我那页面上就是奇怪的显示出了>这个符号。

  • http://www.moncoon.com 人比望月迟

    问题已经解决了,谢谢

  • http://hugege.com/ 胡戈戈

    现在已经成为面试CSS必备的考题之一了
    当然还有另外一种方法

  • http://www.voidman.com voidman

    标题少了几个字,固定大小,呵呵

  • http://sytao.net sytao

    THX~~正好用到。。…… :P

  • http://sytao.net sytao

    补充一点:如果调整了浏览器大小这方法似乎就很不妥了。oneoo有啥好办法没有?

  • jjjackie

    ………….无语..有无试过的你?!晕…