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

时间 2019-11-12

原文原文链接

1.前言html

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

因此说一旦有不兼容的弹出框，就本身画了。画多了，就习惯了。今天就分享一个方法【可是这个方法的原理我居然琢磨不透！】ui

2.详情spa

代码是这样的，一个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>

而后效果图是这样的code

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

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

<!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>

实现效果以下：blog

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

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>