我的幻燈片不能居中顯示，我嘗試的都無所謂

Question

我有一個自動播放的幻燈片（由jQuery / JS控制），它要求每個圖像都必須絕對定位。 問題是我正在嘗試將此幻燈片顯示在頁面上水平居中，但是我嘗試的任何方法似乎都沒有效果。 幻燈片放映不僅必須以全屏寬度為中心，而且還必須在調整瀏覽器大小時進行。

據我了解，任何絕對定位的東西都應該相對於下一個定位的祖先定位。 在我的代碼中，這個祖先恰好是相對定位的“ .fadein” div（我認為？還是“ #slideshow” div？）。 因此，如果我定位此“ .fadein” div，則幻燈片放映理論上也應在頁面上移動。

這確實有效。 我可以將“ .fadein” div從左側（或任意一側）相對定位100px（或其他位置），幻燈片也將移動。

但是我找不到任何可靠的方法將幻燈片放到頁面的水平中心，而沒有一個：

1）在圖像的一側造成額外的“空白”，從而導致頁面底部的滾動條無所作為。

2）防止在調整瀏覽器大小時調整圖像大小。

編輯1：我可以使幻燈片居中顯示，但找不到改變其大小的方法...

希望有人可以幫助我解決這個問題。 謝謝！

  $(function() { $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut(2000) .next('img').fadeIn(2000) .end().appendTo('.fadein'); }, 5000); }); 

 .fadein { position:relative; } .fadein img{ position:absolute; left:0; } 

 <div id="slideshow"> <div class="fadein"> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> </div> </div> 

編輯2：我發現居中在Safari（蘋果機）中效果很好，但在Firefox（蘋果機）中效果不佳。 為什么會這樣呢？ 以下是我現在所要做的（對頁面的流程進行了一些編輯，但是我沒有做任何事情來改變FF中的布局。在FF中，幻燈片顯示現在向右約600px，因此已關閉）在Safari中，它非常適合，不需要任何滾動。

 .fadein { position:relative; top:70px; height:100%; } .fadein img { position:absolute; left:50%; top:50%; -webkit-transform: translate(-50%, -0%); } #slideshow { max-width:100%; height:100%; } 

 <div id="slideshow"> <div class="fadein"> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> </div> </div> 

Answer 1

您實際上可以使用來自CSS的calc例如：

.your-absolute-element {
  position: absolute;
  left: calc(50% - sizeOfElement);
}

這是一個選擇，有很多方法可以使居中框對齊中心。

Answer 2

 $(function() { $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut(2000) .next('img').fadeIn(2000) .end().appendTo('.fadein'); }, 5000); }); 

 body,html { position:relative; height: 100%; } .fadein { position:relative; height: 100%; } .fadein img{ position:absolute; left:50%; top: 50%; -webkit-transform: translate(-50%, -50%); } #slideshow { position:absolute; width: 100%; height: 100%; } 

 <div id="slideshow"> <div class="fadein"> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/350x150" /> </div> </div>