css以位置为中心

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;
}

http://jsfiddle.net/ktFuN/

这很好，直到我缩小浏览器窗口，得到滚动条，然后即使使用滚动条，我也会失去图像的左侧和顶部，我不能一直滚动到图像的左侧或顶部，就像居中不再起作用一样。

为什么？

Answer 1

当您减小窗口大小时，只有正文大小会减小，而不是图像或显式大小的div#test1的正文大小。假设body大小变为450x300 (width x height)，即小于div大小500 x 333。

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

div左侧计算为(50% of 450) = 225div顶部计算为(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/

您可以在这个线程中查看一些基于css的通用解决方案，以使元素居中。