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. HTML DOM元素关系与操作

    <html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...

  2. php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明

    php有一款插件叫做imagemagick,功能很强大,提供了图片的很多操作,图片剪切.压缩.合并.插入文本.背景色透明等.并且有api方法调用和命令行操作两种方式,如果只是简单处理的话建议api方法 ...

  3. etcd raft library设计原理和使用

    早在2013年11月份,在raft论文还只能在网上下载到草稿版时,我曾经写过一篇blog对其进行简要分析.4年过去了,各种raft协议的讲解铺天盖地,raft也确实得到了广泛的应用.其中最知名的应用莫 ...

  4. Postgresql快速写入/读取大量数据（.net）

    环境及测试 使用.net驱动npgsql连接post数据库.配置:win10 x64, i5-4590, 16G DDR3, SSD 850EVO. postgresql 9.6.3,数据库与数据都安 ...

  5. voa 2015 / 4 / 26

    Now, Words and Their Stories, a VOA Special English program about American expressions. I'm Rich Kle ...

  6. SQL-结构化查询语言(1)

    一:数据查询语言(DQL),Data Query Language,用以从表中获取数据,确定数据怎样在程序中给出.SELECT是DQL中用的最多的! select user,host,password ...

  7. 【使用WCF，发布服务端浏览报错】未能从程序集“System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089” 中加载类型 “System.ServiceModel.Activation.HttpModule”。

    问题: 在WIN7中的IIS服务器中部署WCF服务程序时,通过浏览器访问报出如下错误: 未能从程序集"System.ServiceModel, Version=3.0.0.0, Cultur ...

  8. Java电器商场小系统--简单的java逻辑

    //商场类public class Goods { int no; //编号 String name; //商品名称 double price; //商品价格 int number; //商品数量 / ...

  9. docker~从Dockerfile到Container的过程(终于算是OK了)

    上一文章,主要介绍Dockerfile里各参数的含义,以及在项目文件里这些内容的含义,因为大叔认为官方和网上其它文章说的有些模棱两可,不太好让大家理解,所有我又从新写了一个大白话的文章,希望可以给大家 ...

  10. Java的基本数据类型和运算

    编码 ASCII--0~127  65-A  97-a 西欧码表---ISO-8859-1---0-255---1个字节 gb2312----0-65535---gbk---2个字节 Unicode编 ...