以下为让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在浏览器的正中间显示。
可以使用offset()方法来获取元素距离浏览器的边距，offset()
方法返回或设置匹配元素相对于文档的偏移（位置）。
工具原料：编辑器、浏览器
1、首先设置一个div然后使用offset()方法来获取其距离浏览器顶部的高度，简单的代码示例如下：
<body style="margin: 0;padding: 0;">
<div style="width: 200px;height: 200px;border: 1px solid red;margin-top:100px;"></div>
<script>
alert($('div')offset()top);
</script>
</body>
2、因为div距离顶部的距离是100像素，所以d出的应该是100，如下图：
jquery给一个DIV设置坐标：
jquery中设置div的坐标位置的方法是通过offset实现的。
1、获取到div对象并且获取到当前偏移位置
var p = $("#elementId");对象
var offset = poffset(); 位置
2、设置坐标位置，一般之关系距离顶部和左部的坐标：
$("#secondElementId")offset({ top: offsettop, left: offsetleft})
父DIV设置为相对定位，子DIV设置为绝对定位。
<div style="height:158px; width:158px; position:relative;">
Test001
<div style="height:158px; width:158px; filter: alpha(opacity=45); opacity:045; position:absolute; left:0; top:0;">
Test002<br/>
</div>
</div>
父级的相对定位：是要把子DIV的绝对定位的起点以父DIV左上角为起点，如果没有就默认屏幕左上角了。
子DIV的绝对定位：是无视父DIV下别的元素。然后就是left:0; top:0; 这个是用来定位的
希望对你有帮助
以上就是关于Div 在页面中居中全部的内容，包括:Div 在页面中居中、如何获取div距离浏览器顶部的高度，宽度，内容、jquery怎么给一个DIV设置坐标等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）