css - 将图像始终放在中心页面

Question

将图像始终放在中心页面(Ajax 调用的 E.x 图像加载)，即使在移动滚动时也是如此。怎么样？

Answer 1

对于大多数浏览器，您可以使用position:fixed

 img.centered {
     position:fixed;
     left: 50%;
     top:  50%;
     /*
         if, for instance, the image is 64x64 pixels,
         then "move" it half its width/height to the
         top/left by using negative margins
     */
     margin-left: -32px;
     margin-top:  -32px;
 }

例如，如果图像是 40x30 像素，您将设置 margin-left:-20px; margin-top:-15px 代替。

这是一个 jsfiddle 示例:http://jsfiddle.net/WnSnj/1/

请注意 position:fixed 在所有浏览器中的工作方式并不完全相同(尽管在所有现代浏览器中都可以)。请参阅:http://www.quirksmode.org/css/position.html