将div定位到屏幕中央

2024-08-28

将一个div始终定位在屏幕中心

//div的id为box #box{ width:200px; heighti:200px; border:1px solid #f00; //重点是以下规则 position:absolute; top:0px; left:0px; bottom:0px; right:0px; margin:auto; }

.popup{ width:500px; height:400px; position:absolute; top:50%; left:50%; margin-top:-200px; /*注意:这里的上,左边距的偏移是关键,一定要是height值的一半*/ margin-left:-250px; /*注意:这里的上,左边距的偏移是关键,一定要是width值的一半*/ border:1px solid #ffffcc; } HTML: <div class="popup&quo

设置一个DIV块固定在屏幕中央（两种方法）

设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } </style> <!doctype html> <html lang="zh-cn"> <head> <meta charset="UT

html中div定位练习

html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定,$http请求等等,记录备忘: login.css中代码: /* 主页面数据列表 */ .planWrite{ background-color: #868383; margin: 9px; font-size: 16px; width: 93%; height:330px; } .plDiv{ w

java swing窗口放置屏幕中央问题思考

java swing窗口放置屏幕中央问题思考以前总是尝试各种方法都没有能把组件放到屏幕中央,只能用死办法,设置绝对坐标,但这样就失去了可移植性,而且繁琐.今天仔细思考了一番,终于被我找出问题所在. 注意以下部分成功的前提条件是:pack(),必须放在以下代码之前执行,否则pack()置于之后将会覆盖前面的位置设置,前面的代码就失效了.这就是一直折磨我的问题. 成功的前提条件是:pack(),必须放在以下代码之前执行,否则pack()置于之后将会覆盖前面的位置设置, 以前总是尝试各种方法都没有能

div定位

1.float定位带来的问题<html> <head> <title>div浮动引发的问题</title> </head> <style> body{ margin:0px 1px 2px 3px; } #father{ background-color:#FFFF99; width:100%; height:100px; border:1px dashed green; } #son1{ float:left; } #son2{ f

winfrom 窗口起始位置为屏幕中央

窗口起始位置为屏幕中央 this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen; 获取鼠标触发事件光标位置 this.StartPosition = System.Windows.Forms.FormStartPosition.Manual; Location = new Point(Cursor.Position.X, Cursor.Position.Y)

利用onresize使得div可以随着屏幕大小而自适应的代码

原文:http://www.jb51.net/article/21831.htm 当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位:另一种是用百分比来相对定位,在这种两种方式下,绝对定位是不能让div随着屏幕而自适应的,而用百分比就可以,但是,是用百分比就会有一个新的问题,如果我们的页面中有这么一句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

div定位relative和absolute测试1

div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设置两种定位方式,都是top值10px.测试结果:蓝色div(relative):18px,相对于body向下的了10px,body自身带着上margin是8px,所以相对于浏览器上方是10+8px.相对位置受外面的内容的margin的影响.红色div(absolute):10px,相对于浏览器向下了

div定位relative和absolute测试2

之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. 相对定位,不论是不是包含关系,都会受外部容器的影响.绝对定位,只和浏览器有关 ,和其他没有影响. 如本文的测试中,红色div是相对浏览器定位,不受其他div影响.绿色的是包裹了蓝色和红色的div,它有30px的margin-top,加上前面的黄色div的高度100px,绿色div距离浏览器顶部是13

C# WinForm设置窗口无边框、窗口可移动、窗口显示在屏幕中央、控件去边框

1)窗口去除边框在组件属性中FormBorderStyle设为None 2)窗口随着鼠标移动而动添加引用using System.Runtime.InteropServices; 在初始化控件{InitializeComponent();}代码后添加 [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [DllImport("user32.dll")] public stat

ie10兼容问题 -- 将div定位absolute在图片img上面，导致div点击事件无效

ie10兼容问题: 将div定位absolute在图片img上面,发现div若不加背景色,导致div点击事件(任何事件)无效. <div class="paper-box"> <div class="red-paper"> <img class="company-uk-packet" src="./images/uk-bag.png" alt=""> </div&g

JaveWeb 公司项目（2）----- 类模态窗口显示DIV并将DIV放置在屏幕正中间

上一篇博客写的是通过隐藏显示进行div的替换,接下来需要在原有的div前添加一个div,进行表单的提交,需要将div放置在正中间,然后类似C#中的模态窗口,在进行完新弹出的div操作之后,才可以进行下一步操作首先第一步,新建一个div窗口,代码暂时不贴,主贴的最后贴上完整代码效果如图所示: 可以看出此时的DIV只是将元素展示了出来,还没有进行相应的优化,且不能对元素进行操作,主体DIV的位置也没有固定,显得很难看,下面对界面进行优化排版首先要将div的位置放在界面的正中央,修改主体DIV的

css+js定位到屏幕中间

ex:让一个div始终显示在屏幕中间一. css:#idName{position: absolute;z-index: 999;width: ?px;margin-top: ?px;}//此处的初始定位按具体的自己调计算并设置页面滚动条改变时移动的距离: function sc1(idName) { var d = document.getElementById(idName); d.style.top = (document.documentElement.scrollTop

H5项目常见问题及注意事项，视频全屏，定位，屏幕旋转和触摸，偏页面重构向来源joacycode的github

Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度,为一个正整数,或字符串‘device-width’ // heig

网页制作过程中div定位的三个问题

这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head .body. foot几部分 ,head .body和foot 再从上到下从左到右分几块,在这中间我遇到了一个问题,本来从上到下分了几块计划都是不用绝对定位的,可是在这个过程中我把网页的第一部分topup块position设置成了absolute,在紧邻着他的mainbanner块习惯性的也加上了po

同级、父子级div定位

以两个div右上角对齐为例: 效果图: 1.同级定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

CSS+DIV定位分析(relative,absolute,static,fixed)

在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所了解.在此总结一下: 1.官方定义先看下各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative:生成相对定位的元素,通过top,bottom,left,right的设

h5实现输入框fixed定位在屏幕最底部兼容性

1.问题由来做h5 已经有很长一段时间了,现在做的工作h5比pc上的更多,曾经解决pc端IE各个版本的兼容性也是伤透脑筋,原以为h5的会更好,殊不知,还有更头疼的问题,当设计师要设计一个聊天窗口,把输入框定位在最底部,这是再常见不过的问题了吧,举例: 上图就是我最近做的一个功能,原以为是很简单的一个定位功能,但是没想到牛逼的测试居然用各种iphone,各种安卓,各种浏览器(qq浏览器.safari.opera等浏览器),各种输入法(系统自带.搜狗输入法),测出来一大堆问题,最后经过千辛万苦,终

一个DIV相对于另一个DIV定位

<div style="position:relative"><div style="position:absolute; top:0px; left:0px; "></div></div> top和left调整DIV位置,若DIV大小会动态改变可用 % 进行调整定位.