如何在屏幕中間顯示div

Question

我設計了一個包含許多小圖像的頁面，我喜歡單擊小圖像然后打開一個固定的div並顯示我的大圖像，它非常適合頁面上方的圖像，但是當滾動下拉至頁面底部時，現在效果很好，什么是不可靠的

function LoadShowDiv () {
    $('.BackgroudShade').slideDown(800);   // shade of background will be visible
    $(".DivOfImage").show();               // Div of Large Image will be visible          
// When Image loaded successful then set width,height and top,left of Large Image Div 
// but i want set top,left when screen is scroll down to bottom of page
// then show Div at middle of screen in every time
    $('.LargeImage').load(function() {     
       $('.DivOfImage').width($('.LargeImage').width());
       $('.DivOfImage').height($('.LargeImage').height());
       var LeftPostion = (WidthOfScreen - $('.LargeImage').width()) / 2;
       var TopPostion = (HeightOfScreen - $('.LargeImage').height()) / 2;
       $(".DivOfImage").offset({ top: TopPostion, left: LeftPostion});
       $('.LargeImage').show(1000);
    })
}

$('#SmallImage').click(function(){
    $('.LargeImage').attr('src','LargeImage.jpg');
    LoadShowDiv();
})

.DivOfImage {
    border: 8px solid #FFF;
    color:#FFF;
    background-color:#FFF;
    border-radius:10px;
    position:fixed;
}

HTML代碼：

<!-- This is Div of small Image -->
<div class="Image_DIV" id="Image20">
  <table>
   <tr><td class="Image"><img src="Chosen/Small/20.jpg"/></td></tr>
   <tr>
     <td class="ImageDescribe"></td></tr>
  </table>
</div>

<!-- This is Div of Large Image and Background Shade -->
<div class="BackgroudShade"></div>
<div class="DivOfImage"><img class="LargeImage"/></div>

Answer 1

移除position:fixed; 從您的css只使用position:absolute; 喜歡，

.DivOfImage {
    border: 8px solid #FFF;
    color:#FFF;
    background-color:#FFF;
    border-radius:10px;
    position:absolute;// use absolute only
}

在“ Absolute之后使用“ Fixed將覆蓋您的position property ，但不會使其變為absolute