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

基本上我有一个div，宽512px，高336px。我希望这个div始终位于屏幕中央。如果浏览器窗口小于这些尺寸，我希望滚动条能够插入，以便用户可以看到所有内容

目前，我已经成功地将div放置在中心位置，我已经设置了minwidth/minheight，这个高度工作得很好，但由于某些原因，minwidth不是。看起来滚动条在显示，但内容在左边被剪掉了，我不知道为什么

我构建了一个JSFIDLE（尝试重新调整窗口大小，使内容大于浏览器窗口，您将看到问题）

HTML:

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

#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; }

---

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

这是因为页边空白。您的容器越来越小，您尝试放置一个太大的边距。 Try使用媒体查询。我试过了，但似乎效果不错，您的图片看起来整个都可见。我将您图片的宽度作为查询的限制，并取消所有边距：

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

---

我认为它被剪掉是因为你的负边距-滚动条只到内容区域的末尾，而不是（负）边距。但是，如何解决这个问题，还不确定。啊，你这个明星，它工作得很好。但是对于旧浏览器的浏览器支持呢？旧浏览器的支持是另一个问题：）但是我相信你会很快找到很多这样的资源（例如：）