css超简单实现div页面居中【适合做弹出框】

1.前言

现在项目中用到弹出框的话大部分都是直接用控件的。不过有控件虽方便,但有时候会有冲突的地方。我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋值不成功。我也不知道什么问题。如果有知道原因的大神,求赐教!

所以说一旦有不兼容的弹出框,就自己画了。画多了,就习惯了。今天就分享一个方法【但是这个方法的原理我竟然琢磨不透!】

2.详情

代码是这样的,一个div.point无宽高度,left:50%;top:50%;这样的话,就会在页面的正中间,然后div.pop设置了500px的宽高,居左,居上各-250px的距离。然后这个div.pop就会在页面居中了;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .point{position:absolute;left:50%; top:50%;}
        .pop{width:500px; height:500px; position:absolute;left:-250px; top:-250px; border:2px solid red; }
    </style>
</head>
<body>
    
        <div class="point">
            <div class="pop"></div>
        </div>

</body>
</html>

然后效果图是这样的

 

然后这样的话它就居中了。我一直不明白的就是,我并没有设置position:relative,那么这样的话div就应该相对于body进行绝对定位了。我这个代码中的第一个div.point确实是相对于body进行绝对定位了。那么我这第二个div的父级并没有设置positon:relative。那么它应该是不是也应该相对于body绝对定位呢。但是事实并不是这样子呢,它是相对于div.point进行了绝对定位。【虽然效果实现了,但是原理并不是特别懂,求大神赐教】

我一直就是用这种方法做的弹出框。不过,实际应用中,最外层还得加一个div。然后这个div设置成100%宽高度,posiotn:fixed;left:0;top:0;这样的话弹出框居中了,鼠标也滚动不了。效果较真实一点;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .point{position:absolute;left:50%; top:50%;}
        .pop{width:500px; height:500px; position:absolute;left:-250px; top:-250px; border:2px solid red; }
    </style>
</head>
<body>
    <div  style="width:100%; height:100%;left:0;top:0; position:fixed;background:rgba(0,0,0,0.3)">
 
        <div class="point">
            <div class="pop"></div>
        </div>
    </div>


</body>
</html>

 实现效果如下:

这样的话,一个居中的弹出框就实现了,在页面的正中间。不过代码实现了,原理不是特别懂,还希望各位对我进行指点一二,让我能真正明白这个理!谢了。

3.总结

希望这种写法能够帮助到需要的小童鞋。也希望我文中的不足不要影响到大家,如果有错误的地方,请大家告之。

4.追加

根据大神程序猿到攻城狮之旅 的指点。我大概领会了。我上面的代码要做一下修改.修改后如下。其实我根本不需要第一个div.point。这个div设计top:50%;left:50%后,它的左上角那个点其实就已经在页面中间了,这个时候,我只要向左向右移动想要的负像素,就可以让div往中间靠近了。这样的话,更容易理解,而且更简单。当然了,外层再加个div作为遮罩层还是很有必要的。

<body>
    <div style="position:absolute; top:50%;left:50%; width:500px; height:500px; margin-top:-250px; margin-left:-250px; border:2px solid red"></div>
</body>

 

posted @ 2017-08-15 09:44  苏小苏sxs  阅读(38354)  评论(44编辑  收藏  举报