固定大小的层怎样居中

来源:百度知道 编辑:UC知道 时间:2024/05/27 09:51:29
有固定大小的层怎样在不同分辨率的情况下都居中,请给出代码具体意思,谢谢!

body{text-align:center;}//在IE下面有作用
.div{width:宽度;margin-left:auto;margin-right:auto;}//在FF下有作用

为了保证在不同浏览器的效果,这两个都要加上去

<div style="position: absolute; border:1px solid red; width:200px; height:200px;margin-left: -100px; left:50%; margin-top:-100px; top:50%">层</div>

拆开来说
position: absolute; 绝对定位(浮动层)
border:1px solid red; 1像素的红边框,便于查看
width:200px; 宽200px
height:200px; 高200px
margin-left: -100px; 这个值是宽的一半
left:50%; 这个绝对层的左定位。定位在页面的50%的位置。
margin-top:-100px; ..
top:50% ..

原理:长宽为200px的浮动层。它距页面左边50%和上边50%的位置。
如果他的长宽为0的话,这时候他是绝对居中的(上下方向和左右方向)。

但是这个层有长宽,所以这时候并不是居中的,
他的实际位置时,据页面最上边50%+它的宽度的一半。

所以写的时候写了margin-top=-100px 这个长度是层宽度的一半

本来想回答的,看到“ankuzula”的就算了,他的是正确答案,我一直都是这么做的~ 可针对不同分辨率~

ankuzula的没错,不过你也不嫌麻烦,
<div style="width=200px;margin:0 auto;"></div>
兼容所有浏