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

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

这是为什么？

score 0 · Accepted Answer

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

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

你的 div 的左边计算到你的 div 的(50% of 450) = 225 顶部计算到(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 -使用负边距/

您可以查看此线程以获取一些基于 css 的通用解决方案以使元素居中。

1 回答 1