如何以最小高度/最小寬度垂直居中對齊一個div？

基本上我有一個寬度爲512px，高度爲336px的div。我希望這個div始終位於屏幕的中心。如果瀏覽器窗口小於這些尺寸，我希望滾動條可以踢入，以便用戶可以看到所有內容。如何以最小高度/最小寬度垂直居中對齊一個div？

目前我已經設置了我的div集中，我已經設置最小寬度/最小高度，高度工作完美，但由於某種原因最小寬度不是。看起來滾動條正在顯示，但內容在左側被截斷，我無法弄清楚原因。

我敲了一個的jsfiddle here（嘗試重新調整大小的窗口，使含量比瀏覽器窗口大，你會看到這個問題）

HTML：

<div id="vert-wrapper"> 
    <div id="wrapper">   
     <img src="http://lorempixel.com/512/336/" width="512" height="336" /> 
    </div> 
</div>

和CSS：

#vert-wrapper { width: 512px; min-height: 336px; height: 100%; position: absolute; left: 50%; margin-left: -256px; } 
#wrapper { width: 100%; min-width: 512px; height: 336px; position: absolute; top: 50%; margin-top: -158px; }

任何幫助將是更加感激ated。謝謝。

來源

2013-02-17 alimac83

我覺得它越來越修剪，因爲你負邊界 - 滾動條只能進入內容區域的末尾，而不進入（負向）邊界。但是，如何解決這個問題，還不確定。 – Joe 2013-02-17 15:49:56

這是因爲剩下的餘量。您的容器越來越小，您嘗試將裕度過大。嘗試使用媒體查詢。我試過了，似乎工作，你的照片似乎是在entire.I可見把你的照片的寬度作爲查詢的限制，並取消所有保證金：

@media (max-width:512px){ 
    #vert-wrapper {left:0%; margin-left:auto; } 
}

來源

2013-02-17 15:49:49 audre7

啊，你明星，完美的工作。但瀏覽器對舊版瀏覽器的支持又如何呢？ – alimac83 2013-02-17 15:54:08

舊的瀏覽器支持是另一個問題:)但我相信你會很快找到很多的資源（例如http://code.google.com/p/css3-mediaqueries-js/） – audre7 2013-02-17 16:01:00

如何以最小高度/最小寬度垂直居中對齊一個div？

回答

相關問題