將圖像始終放在中心頁面

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/

請注意，位置是：固定在所有的瀏覽器不工作完全一樣（雖然它是在所有現代的確定）。請參閱：http://www.quirksmode.org/css/position.html

Answer 2

這可以幫助你：http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/

Answer 3

放入一些類名（centeredImage）div標籤的圖像，並使用下面的CSS

div.centeredImage { 

    margin: 0px auto; 
    position: fixed; 
    top: 100px;//whatever you want to set top; 

} 

Answer 4

<style> 
.CenterScreen{ 
    position:fixed; 
    /*element can move on the screen (only screen, not page)*/ 

    left:50%;top:50%; 
    /*set the top left corner of the element on the center of the screen*/ 

    transform:translate(-50%,-50%);} 
    /*reposition element center with screen center*/ 

    z-index:10000; 
    /*actually, this number is the count of the elements of page plus 1 :)*/ 
    /*if you need that holds the element top of the others. */ 
</style> 

如果添加這個類你的元素，它會始終在屏幕的中央。

例如：

<a href="#" class="CenterScreen">Hello world</a>