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. 【Android Developers Training】 106. 创建并检测地理围栏

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  2. SQL显示某月全部日期明细以及SQL日期格式

    SQL显示某月全部日期明细<存储过程> 方法一: declare @date datetime declare @end datetime ,getdate()) ,@date) crea ...

  3. MyBatis源码解析【3】生命周期

    经过之前的项目构建,我们已经得到了一个可以使用的最基本的项目. 其中已经包括整个执行的过程.但是我们在完成之后也遇到了很多问题,我们就要慢慢的一步步解决这些问题. 讲道理,今天我们其实应该直接开始看源 ...

  4. ssh自动化出现的莫名报错

    代码如: ssh -q user@host <<EOF localhost EOF 会出现提示如: Pseudo-terminal will not be allocated becaus ...

  5. BufferedWriter

    package JBJADV003;import java.io.*;public class BufferedWriterTest { public static void main(String[ ...

  6. spa单页面应用（angular）

    本篇文章是对单页面的一个简单的基本逻辑操作,这个方法可以搭建基本的单页面的逻辑结构. 简单理解:单页面应用,锚点值切换,一个路由对应一个页面. 路由:此时会创建一个信息保存路由的信息,之后对页面a标签 ...

  7. [jbdj]SpringMVC框架(1)快速入门

    1)springmvc快速入门(传统版) 步一:创建springmvc_demo一个web应用 步二:导入springioc,springweb , springmvc相关的jar包 步三:在/WEB ...

  8. SQL Server Alwayson配置两个节点加共享文件夹仲裁见证

    标签:MSSQL/节点和共享文件夹多数 概述 之前讲过多数节点的仲裁配置,多数节点一般3个节点以上的奇数个节点:常见的是使用3个节点节点多了也是浪费因为Alwayson的只读路由只能利用到一个只读副本 ...

  9. java Semaphore的介绍和使用

    一个计数信号量.从概念上讲,信号量维护了一个许可集.如有必要,在许可可用前会阻塞每一个 acquire(),然后再获取该许可.每个 release() 添加一个许可,从而可能释放一个正在阻塞的获取者. ...

  10. HDU 1864 最大报销额（DP）

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=1864 题目: 最大报销额 Time Limit: 1000/1000 MS (Java/Others) ...