如何以最小高度/最小宽度垂直和水平居中div？

Question

基本上我有一个宽度为512px，高度为336px的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; }

任何帮助将不胜感激。感谢。

Answer 1

这是因为留有余量。你的容器越来越小，你试图把一个太大的余量。 尝试使用媒体查询。我试过，似乎工作，你的图片似乎在整个可见。我把你的图片的宽度作为查询的限制，并取消所有保证金：

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