这破玩意着实让我折腾了一会,四处求方但怎么都实现不了。但最终还是让我给解决了,好了我们现在来分析一下。
首先有如下代码:
#A{
position: absolute;
width: 500px;
height: 80px;
background: url(images/xxx.jpg);
}
设置成absolute是为了让该div浮动,以便来完成其他目的,然后我需要这个窗口居中。这里该级的父级是一个很大的块,所以不能为它提供定位。然后我们加入margin,这里如果你设置一个数值比如margin-left:300px;那么他就会距离左侧边框300px。但是如果你设置auto的话就无效了,他会顶在最左边。当然我们可以设置left:50%,这样从语法上看确实居中了,但需要注意的是这里我的A层是一个长500高80的图片,图片左侧顶在正中央的话图本身仍然不在中间。即便调整百分比,只要浏览器的宽度发生改变图也会随着偏移。当然,这里不好理解也很矛盾,但事实就是如此。我们做这个不能光让它满足自己的窗口分辨率不是。所以总体来说对A再做任何设置以我的水平来说都是无法让它能完美居中的。
好了,办法总是有的,即便是一个笨办法。但其实偶尔这种本办法能很容易解决这种很难掌控的问题。在这里我们可以另加一个父级层。absolute的定义是浮动该层同时它的定位是以它的父级层的定位为准。那么这就好理解也好操作多了。建立如下B层
#B{
margin: 0 auto;
padding: 0;
width: 500px;
height: 80px
}
position的默认属性不是absolute,所以这里不用定义。然后在这种情况下B层当然是居中的,而且是相当完美的居中。然后只需要在html中把B层套在A层外即可。
<div id=”B”><div id=”A”></div></div>
至此,完成了A层的完美居中。而对于这种加套子层的方法还能在其他地方解决很多定位问题,虽然不推荐,但确实能有效而简便的解决问题。当然,如果您有更好的方法,欢迎留言!