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>