以前在面试中就遇到过这个问题。借用别人的解释。
以下为让div显示在浏览器正中间的样式
<style type="text/css">
#centerdiv {
position:absolute; <!--设置div以绝对位置显示-->
top:50%; <!--在离顶部50%的位置显示-->
left:50%; <!--在离左边50%的位置显示-->
margin:-150px 0 0 -100px;
width:300px;
height:200px;
background:black;
}
</style>
不明白就是在margin:-150px 0 0 -100这个属性上面,在不设置这个属性的时候,这个div的x坐标为内容显示部分的50%,y坐标为内容显示部分的50%,显示出来的然而这样的话只能说这个div的起点是在正中间,我们需要的是将整个div显示在正中间,所以给margin-left:-150px;(这里的150是从width属性中得来的它是等于width的一半,对应的margin-top也是通过通样的方法得来的。)这样就会把整个div的宽度分一半到左边就可以让其水平居中了,在设置margin-top:-100px;是同样的道理,会将整个div的高度分一半到上面显示。就形成了整个div在浏览器的正中间显示。
分享到:
相关推荐
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效<br>需要掌握的八个CSS布局技巧<br>用css实现链接经过时显示浮动图片背景的效果<br>自适应大小的CSS圆角盒子<br>div+css实现Firefox和IE6兼容的垂直居中...
" "<td width="162"><div align="center">单元格13</div></td> " "</tr> " "<tr> " "<td rowspan="2"><div align="center">单元格21</div></td> " "<td colspan="2"><div align="center">单元格22</div></td> " "</...
标记在使用时,用尖括号 "<>",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法:<标记>内容</标记> Demo : 1、创建 p 标记 --<p>...</p> 2、创建 div 标记 -- <div></div> 3、创建 ...
<div id=result>请在按键上按下屏幕上显示的字</div> </div> 2、页面布局的样式代码如下: body{ margin: 0; /*开启弹性布局,并让弹性布局中的子元素 水平居中对齐,垂直居中对齐*/ display: flex; /* 用于...
<a href="javascript:function()">word</a> 上一网页源 asp: request.servervariables("HTTP_REFERER") javascript: document.referrer 释放内存 CollectGarbage(); 禁止右键 document.oncontextmenu = ...
当div是浮动的时候浏览器窗口发生变化的时候不能居中显示(因为浮动的时候一般设定的有left或者right值) 可以先用jquery获取外围的div随浏览器变化而变化的宽度(加上监听事件) 之后再获取div的宽度 例如: 代码...
全屏页面CSS+DIV上中下三行布局,兼容各浏览器中间居中显示
登录窗口嵌入页面居中显示,放置背景图片,并在图片上相应的位置上放置input、button等控件;文档通过div+css实现;实现的结果适应任何分辨率;文档通过操作后形成,含关键代码。
本文实例讲述了vue插槽slot的简单理解与用法。分享给大家供大家参考,具体如下: vue中插槽的使用非常广泛,本文就插槽的使用和理解简单总结。... <div class=child> <h3>这里是子组件</h3> <slot></slot> </d
两个DIV同一行显示。也可以调整样式使其纵向排列。
这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div...
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。 到现在为止,探讨了很多种方法。 HTML: XML/HTML Code复制内容到剪贴板 <body> <div u...
复制代码代码如下: <div xss=removed> <input class=”submit” id=”btn” type=”submit” value=”注册” /> </div> 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。 .style{margin-...
如:我想要<div id="ok">这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件,...
<div data-role=header> <h1>我是标题</h1> ... 我们写一个html页面,自定义一个data-chb=header的属性,希望具备这个属性的div区域背景颜色为黑色,文字为白色,居中显示;不具备data-chb自定义属性的div按照默
复制代码代码如下:<div data-role=”header”> <h1>我是标题</h1></div> 通过手机浏览,效果如下: 为什么写一个data-role=header就能实现底部为黑色、文字居中显示的效果呢? 本文提供一种最简单的实现办法,让...
这是个登陆界面模板,有利于对css和div布局的学习,适合入门!
包含两个页面和一张百度网址的二维码图片,index-flex.html展示的是flex布局绝对居中写法和遮罩层点击空白处关闭的方法一。index-transform.html展示的是利用transform属性偏移进行绝对居中和遮罩层点击空白处关闭的...
本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果。分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery [removed][removed] 2.在页面的head中加入浮动层和遮罩层的样式 <style> #...