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

Question

基本上我有一个宽度为512px、高度为336px的div。我希望这个div始终位于屏幕的中心。如果浏览器窗口小于这些尺寸，我希望滚动条能够打开，这样用户就可以看到所有内容。

目前，我已经设法将div定位在中心位置，我已经设置了最小宽度/最小高度，高度工作得很好，但由于某种原因，最小宽度不是。滚动条似乎在显示，但内容被剪辑在左边，我不明白为什么。

我在这里敲了一个jsfiddle（尝试重新调整窗口大小，使内容比浏览器窗口大，你会看到问题）

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

这是因为剩下的空白。你的容器越来越小，你试图放一个太大的边距。Try使用媒体查询。我试过了，它似乎奏效了，你们的照片似乎是可见的整体。我把你的图片宽度作为查询的限制，并取消所有边距：

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