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>
css超简单实现div页面居中【适合做弹出框】的更多相关文章
- 超简单的js实现提示效果弹出以及延迟隐藏的功能
自动登录勾选提示效果 要求:鼠标移入显示提示信息框:鼠标离开,信息框消失,消失的效果延迟 <!DOCTYPE html> <html lang="en"> ...
- [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...
- js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- div非弹出框半透明遮罩实现全屏幕遮盖css实现
IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...
- 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决
jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...
- datePiker弹出框被其他div遮挡
最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular ...
- html+css源码之实现登录弹出框遮罩层效果
在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
- css 弹出框
最近想弄一个类似登陆框的那种弹出框,其实网上已经有很多例子,而且也有相应的插件,例如:jquery-ui的,可直接使用,而我就简单的弄了个简易版的登陆框,真的很简易. 其实原理就是设置两个div,一个 ...
随机推荐
- HTML DOM元素关系与操作
<html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明
php有一款插件叫做imagemagick,功能很强大,提供了图片的很多操作,图片剪切.压缩.合并.插入文本.背景色透明等.并且有api方法调用和命令行操作两种方式,如果只是简单处理的话建议api方法 ...
- etcd raft library设计原理和使用
早在2013年11月份,在raft论文还只能在网上下载到草稿版时,我曾经写过一篇blog对其进行简要分析.4年过去了,各种raft协议的讲解铺天盖地,raft也确实得到了广泛的应用.其中最知名的应用莫 ...
- Postgresql快速写入/读取大量数据(.net)
环境及测试 使用.net驱动npgsql连接post数据库.配置:win10 x64, i5-4590, 16G DDR3, SSD 850EVO. postgresql 9.6.3,数据库与数据都安 ...
- voa 2015 / 4 / 26
Now, Words and Their Stories, a VOA Special English program about American expressions. I'm Rich Kle ...
- SQL-结构化查询语言(1)
一:数据查询语言(DQL),Data Query Language,用以从表中获取数据,确定数据怎样在程序中给出.SELECT是DQL中用的最多的! select user,host,password ...
- 【使用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 ...
- Java电器商场小系统--简单的java逻辑
//商场类public class Goods { int no; //编号 String name; //商品名称 double price; //商品价格 int number; //商品数量 / ...
- docker~从Dockerfile到Container的过程(终于算是OK了)
上一文章,主要介绍Dockerfile里各参数的含义,以及在项目文件里这些内容的含义,因为大叔认为官方和网上其它文章说的有些模棱两可,不太好让大家理解,所有我又从新写了一个大白话的文章,希望可以给大家 ...
- Java的基本数据类型和运算
编码 ASCII--0~127 65-A 97-a 西欧码表---ISO-8859-1---0-255---1个字节 gb2312----0-65535---gbk---2个字节 Unicode编 ...