`
f543711700
  • 浏览: 322631 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

div层相对屏幕居中

 
阅读更多
没有研究过这个问题的朋友觉得很难,实际上原理很简单,主要记住以下3点就OK了。

1、先让这个DIV绝对定位.
2、让他距离上边50%,左边50%;这会这个DIV的左上角这个点就是窗口的正中间;
3、因为已经知道了这个DIV的高和宽了,那么再从这里点向左移动总宽及高的一半就可以了;

记住以上3个要点,来看个例子

以下是代码片段:
<div style="width:350px;height:300px;position:absolute;left:50%;top:50%;margin-top:-150px;margin-left:-175px;border:solid #000 5px;">
 </div>


代码分析
符合第一点要求:position:absolute;
符合第二点要求:left:50%;top:50%;
符合第三点要求:margin-left:-175px [也就是-(350/2)] margin-top:-150px [也就是-(300/2)];
分享到:
评论

相关推荐

    css 相对浏览器动态居中永远保持在屏幕正中

    使用如下css可以使div永远保持在屏幕正中 复制代码代码如下: &lt;style type=”text/css”&gt; .log { position:absolute; /*绝对定位*/ top:50%; /*距顶部50%*/ left:50%; margin:-100px 0 0 -150px; /*设定这个...

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

    另一种是用百分比来相对定位,在这种两种方式下,绝对定位是不能让div随着屏幕而自适应的,而用百分比就可以,但是,是用百分比就会有一个新的问题,如果我们的页面中有这么一句 &lt;!DOCTYPE html PUBLIC “-//W3C/...

    HTML+CSS相对宽度和绝对宽度冲突时的div解决方法

    相对宽度和绝对宽度冲突时的div解决方法 摘要:一般我们在使用绝对宽度时会使用px,相对宽度时会使用%,但是要是同时使用绝对宽度和相对宽度时该怎么办呢? 我们通过一道例题来讲解今天的内容: 1.完成图片上的题目...

    最常用和实用的CSS技巧

    控制位置:绝对位置,相对位置 假如有两个div 复制代码代码如下: &lt;div id=’parent’&gt; &lt;div id=’son’&gt;&lt;/div&gt; &lt;/div&gt; 将重要元素放置在屏幕中央 如果你希望将您想要的东西放在最中央,可以使用以下CSS: 复制...

    CSS百分比定义高度为什么没有效果

    原因是百分比的大小是相对其父级元素宽高的大小,如最外层元素设置的百分比是对应屏幕而言的。 需要了解的是对于宽度来说,其父级元素无须确定宽度就能设置百分比,例如我们可以利用这个特性给未知宽度的块级元素...

    精通javascript

    • 13.7.htm “相对位置”定位 • 13.8.htm “绝对位置”定位 • 13.9.htm z-index属性 • 13.10.htm z-index属性之二 • layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨...

    精通JavaScript

    • 13.7.htm “相对位置”定位 • 13.8.htm “绝对位置”定位 • 13.9.htm z-index属性 • 13.10.htm z-index属性之二 • layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨...

    excel的使用

    这样我们可以方便准确地选取数据表格,并能有效避免使用拖动鼠标方法选取较大单元格区域时屏幕的乱滚现象。(9) 快速清除单元格的内容如果要删除内容的单元格中的内容和它的格式和批注,就不能简单地应用选定该...

    易语言程序免安装版下载

    改进应用接口支持库中“设置屏幕分辨率”命令。 9. 修改外部数据库在“表中记录数为零”时可能导致程序崩溃的BUG。 10. 修改扩展界面支持库一,修改“超级列表框.取标题()”不能返回长度大于256的包含汉字的文本...

Global site tag (gtag.js) - Google Analytics