Question

我有一个绝对定位div的例子，它以页面为中心：

HTML

<div id="test1"><img src="http://www.interactivepixel.net/images/i01.jpg" width="500" height="333"/></div>

CSS

#test1{
   position:absolute;
   top:50%;    
   left:50%;
   width:500px;
   height:333px;
   margin-top:-166px;
   margin-left:-250px;
}

这很有效，直到我缩小浏览器窗口，以至于我得到滚动条，然后即使使用滚动条，我也会丢失图像的左侧和顶部，我无法一直向左和向上滚动图像，就像中心不再起作用。

为什么？

Answer 1

当您缩小窗口大小时，只会减小体型，而不是图像或明确大小的div#test1。假设body大小变为450x300 (width x height)，即小于div大小500 x 333。

将CSS顶部和左侧规则应用于div

您的div左侧的

计算为(50% of 450) = 225 div的顶部计算为(50% of 300) = 150

所以你的div现在从点(225, 150) ie (left, top)

开始

现在将CSS负边距应用于div 即-250到左边和-166到顶部

即你现在的div位置变为(225-250, 150-166) ie (-25, -16) absolute position。

这意味着每当您将窗口大小减小到比绝对定位的div大小更小时，div的某些部分将无法查看，因为body从（0,0）开始

既然你已经给出了左上角和左上角的div负余量，请阅读此内容以了解div如何脱离视野：http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

您可以检查this个主题是否有一些基于CSS的通用解决方案，用于居中元素。