css超简单实现div页面居中【适合做弹出框】
来源:互联网 发布:linux 线程数 查看 编辑:程序博客网 时间:2024/05/16 16:17
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>
完结:如果有一起共同学习前端的小伙伴,可以加我vx:1048725765。与君共勉!
- css超简单实现div页面居中【适合做弹出框】
- css超简单实现div页面居中【适合做弹出框】
- css实现弹出框在页面居中
- 纯css实现未知尺寸图片在DIV中垂直水平居中(超简单)
- 纯js+css实现 页面弹出div
- Div+CSS实现始终居中的半透明弹出层
- 实现DIV居中 css
- CSS实现div居中
- CSS div居中实现
- CSS实现 DIV在页面垂直居中两例
- Div和CSS实现页面水平居中的方法
- CSS之通过定位简单实现div绝对居中
- 弹出框透明背景(超简单实现)
- 做一个页面居中的div
- CSS + DIV 布局(页面居中)
- div/css居中页面不变尺寸
- Css Margin 实现页面居中
- div+css=>遮罩+弹出框(固定在页面中间)
- 算法学习之旅,初级篇(17)--质因数分解
- jmeter
- adb logcat 命令详解
- Hello My CSDN !
- iOS CMTimeMake 和 CMTimeMakeWithSeconds
- css超简单实现div页面居中【适合做弹出框】
- PostMan使用教程一
- 拉格朗日插值
- ARP欺骗
- Java ConcurrentModificationException异常原因和解决方法
- Oculus在unity中UGUI的显示问题
- 鼠标经过图片放大,不超过父块
- K
- 使用bat文件重启nginx , windows上nginx重启