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>

css超简单实现div页面居中【适合做弹出框】的更多相关文章

  1. 超简单的js实现提示效果弹出以及延迟隐藏的功能

     自动登录勾选提示效果 要求:鼠标移入显示提示信息框:鼠标离开,信息框消失,消失的效果延迟 <!DOCTYPE html> <html lang="en"> ...

  2. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

  3. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  4. div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

  5. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  6. datePiker弹出框被其他div遮挡

    最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular ...

  7. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  8. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  9. css 弹出框

    最近想弄一个类似登陆框的那种弹出框,其实网上已经有很多例子,而且也有相应的插件,例如:jquery-ui的,可直接使用,而我就简单的弄了个简易版的登陆框,真的很简易. 其实原理就是设置两个div,一个 ...

随机推荐

  1. 3.sublime vue 语法高亮插件安装

    默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下:   第一,在 s ...

  2. 常见的JQuery应用举例

    在学习JS之后,JQuery(以下简称JQ)为我们提供了一种更加便捷和简单的操作模式,利用它开发人员将更为高效的进行工作,下面将一些常见的问题进行举例. 1.点击某处弹出提醒,例如某些游戏在注册时会弹 ...

  3. 基于Metronic的Bootstrap开发框架经验总结（15）-- 更新使用Metronic 4.75版本

    在基于Metronic的Bootstrap开发框架中,一直都希望整合较新.较好的前端技术,结合MVC的后端技术进行项目的开发,随着时间的推移,目前Metronic也更新到了4.75版本,因此着手对这个 ...

  4. poj 1948 Triangular Pastures 小结

    Description Like everyone, cows enjoy variety. Their current fancy is new shapes for pastures. The o ...

  5. Go学习笔记（一）Let's 干吧

    加 Golang学习 QQ群共同学习进步成家立业 ^-^ 群号:96933959 简介     Go是Google开发的一种 静态强类型.编译型,并发型,并具有垃圾回收功能的编程语言.为了方便搜索和识 ...

  6. 关于Calendar中设置月份比实际小1的问题

    有如下程序,转化两个字符串数字为date类型,并判断是历史上的星期几,是否同为星期一 代码如下: public static void main(String[] args) throws Parse ...

  7. 通过ALM OTA API获取test case的信息，并上传测试结果到test set中

    ALM提供了OTA接口,可以用来获取和上传测试数据到ALM.比如获取Test case的step信息.上传测试结果到test instance. 在ALM的Help中可以下载相关文档,这里以ALM11 ...

  8. python基础（4）：条件语句与循环语句

    今天我们看看条件语句与循环语句. 预习: 1.使用while循环输出1 2 3 4 5 6 8 9 10 2.求1-100的所有数的和 3.输出 1-100 内的所有奇数 4.输出 1-100 内的所 ...

  9. 用 volume container 共享数据 - 每天5分钟玩转 Docker 容器技术（42）

    volume container 是专门为其他容器提供 volume 的容器.它提供的卷可以是 bind mount,也可以是 docker managed volume.下面我们创建一个 volum ...

  10. HDU 1728 逃离迷宫（DFS）

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=1728 题目: 逃离迷宫 Time Limit: 1000/1000 MS (Java/Others)  ...