div在页面上居中

最新推荐文章于 2023-08-13 00:34:20 发布

yangchuang_gx

最新推荐文章于 2023-08-13 00:34:20 发布

阅读量409

点赞数

文章标签： div xhtml chrome border 浏览器 class

之前是用expression，但有性能问题，然后网上查了一下，找到下面的方法

<!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=gb2312" />
    <title>div 居中</title>
    <style type="text/css">
        .centerdiv {
            position:absolute;
            top:50%;
            left:50%;
            margin:-100px 0 0 -150px !important;
            width:300px;
            height:200px;
            border:1px solid #0000ff;
        }
    </style>
</head>
<body>
<div class="centerdiv ">i'm the center DIV</div>
</body>
</html>

这个div的x坐标为内容显示部分的50%，y坐标为内容显示部分的50%，显示出来的然而这样的话只能说这个div的起点是在正中间，我们需要的是将整个div显示在正中间,所以给margin-left:-150px;(这里的150是从width属性中得来的它是等于width的一半,对应的margin-top也是通过通样的方法得来的。)这样就会把整个div的宽度分一半到左边就可以让其水平居中了，在设置margin-top:-100px;是同样的道理，会将整个div的高度分一半到上面显示。就形成了整个div在浏览器的正中间显示。

!important 是必须的，不然div会向右上方偏移，不清楚怎么个情况，知道的童鞋可以帮解释一下。

在chrome、ff、ie下测试通过。

原文链接：http://kevinpeng.iteye.com/blog/786625

yangchuang_gx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div在页面上居中

之前是用expression，但有性能问题，然后网上查了一下，找到下面的方法 div 居中 .centerdiv { position:absolute; top:50%; left:50%; margin:-100px 0 0 -150p
复制链接

扫一扫